CSS图片两端对齐,自适应列表布局末行对齐修复实例页面
时间:2019-06-14 发布者: 访问量:3610
text-jusyify下的inline-block自适应列表布局末行对齐修复实例页面
HTML代码:
<div class="box">
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血,不行了,我的小兔乱撞~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="list"><img src="//image.zhangxinxu.com/image/study/s/s128/mm9.jpg" /><br />哇哦,美女,口水,鼻血~~~</span>
<span class="justify_fix"></span>
</div>
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;}
最终效果: