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

很多时候，我们希望列表的最后一行是左对齐排列的，而不是两端对齐，这时候怎么办呢？原理与上面的两端对齐一致。就是复制几个列表元素的外层标签，等宽，但高度为 0，里面就是个(不可缺)，复制的个数一般就是每行元素的列表个数啦，这样肯定可以保证最后一行元素一定是左对齐排列的啦！

更多精彩内容请看 web 前端中文站
 http://www.lisa33xiaoq.net 可按 Ctrl + D 进行收藏

如下 HTML 代码：

 <div class="box">     
 <span class="list"><img src="lisa33xiaoq.net.jpg" /> 哇哦，美女，口水，鼻血~~~
 </span>     
 <span class="list">
 <img src="lisa33xiaoq.net.jpg" /> 哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~
 </span>  
 <span class="list">
 <img src="lisa33xiaoq.net.jpg" /> 哇哦，美女，口水，鼻血，不行了，我的小兔乱撞~~
 </span>  
 <!-- web 前端中文站：www.lisa33xiaoq.net --> 
 </div>

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;}

运行效果：

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