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;}
.justify_fix{display:inline-block; width:100%; height: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="justify_fix"></span> </div>