text-jusyify下的inline-block自适应列表布局实例页面

展示

哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~
哇哦，美女，口水，鼻血~~~

代码

CSS代码：

.box{width:50%; padding:20px; margin:20px auto; background-color:#f0f3f9; text-align:justify;}
.list{width:120px; display:inline-block; padding-bottom:20px; text-align:center; vertical-align:top;}
            

HTML代码：

<div class="box">
    <span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血~~~</span>
    <span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" />
哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~</span>
    .
    .
    .
</div>