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

来源：互联网发布：手机 Ubuntu 编辑：程序博客网时间：2024/06/06 02:56

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

0 0