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

最新推荐文章于 2023-12-12 18:41:34 发布

Quiet-Night

最新推荐文章于 2023-12-12 18:41:34 发布

阅读量1.2k

点赞数

分类专栏： Web前端文章标签：布局

本文链接：https://blog.csdn.net/DeepLies/article/details/71714010

版权

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

摘要由CSDN通过智能技术生成

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/200