text-jusyify下的inline-block自适应列表布局末行左对齐实例页面

展示

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

代码

CSS代码：

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

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>
    .
    .
    .
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
    <span class="list left_fix">&nbsp;</span>
</div>