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

本文链接：https://blog.youkuaiyun.com/DeepLies/article/details/71714010

本文探讨了如何利用`text-align:justify;`实现横栏自适应布局，同时指出其可能导致的子元素间距不一致问题。通过结合脚本动态计算间距和针对不同浏览器的兼容性调整，可以优化这种布局方式。引用了张鑫旭和w3school的相关资料作为参考。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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