使用 `text-align:justify;` 实现横栏自适应布局

BootStrap 框架中，有栅格系统的概念，这一系统的其中一个作用，便是可以根据父级元素的宽度，自动调整内部每行排列的子元素的个数，实现横栏自适应布局，如果不考虑其他，单单只是这个功能的话，实际上text-align:justify; 同样可以实现。

HTML:
<div class="box">
 <span class="list">
 <img src="http://dummyimage.com/200x100/FF6600.png" />
 可以横栏子元素数量自适应哦
 </span>
 <span class="list">
 <img src="http://dummyimage.com/200x100/FF6600.png" />
 可以横栏子元素数量自适应哦
 </span>
 <span class="list">
 <img src="http://dummyimage.com/200x100/FF6600.png" />
 可以横栏子元素数量自适应哦
 </span>
 <span class="list">
 <img src="http://dummyimage.com/200x100/FF6600.png" />
 可以横栏子元素数量自适应哦
 </span>
 <span class="list">
 <img src="http://dummyimage.com/200x100/FF6600.png" />
 可以横栏子元素数量自适应哦
 </span>
</div>

CSS:
.box{
 background-color:#f0f3f9; 
// 下面这句是关键
text-align:justify;
}
.list{
// 每个子元素定宽，这样才好计算每一行的子元素数量
width:120px; 
display:inline-block; 
text-align:center; 
vertical-align:top;
}
img{
width:100%;
height:100%;
}

需要注意的是，使用 text-align:justify; 进行横栏自适应布局，有一个缺陷，那就是当子元素的排列数量多于一行时，如果存在有的行的子元素数量与其他行不同，那么这一行中的子元素间的间距也会与其他的行不同。

类似于下面这样：

所以在运用到实际项目中，最好根据这一缺陷，进行适当的调整，例如使用 JS 脚本，根据父元素与子元素的宽度等信息，动态计算出子元素间该有的间距，然后设置到每一个子元素身上，更多可见 张鑫旭

另外，text-align:justify; 这个属性被所有的浏览器支持，不过，在不同浏览器中的表现可能会不同，所以还需要使用到用户代理，针对不同的浏览器，设置不同的两端对齐的拉伸方式，具体可见 w3school — text-align