CSS(六)– 全兼容的多列均匀布局问题

 

6、全兼容的多列均匀布局问题

如何实现下列这种多列均匀布局(图中直线为了展示容器宽度,不算在内):

 

法一:display:flex

CSS3 弹性盒子(Flexible Box 或 Flexbox),是一种布局方式,当页面需要适应不同的屏幕大小以及设备类型时,它依然能确保元素拥有更恰当的排布行为。

当然 flex 布局应用于移动端不错,PC 端需要全兼容的话,兼容性不够,此处略过不谈。

 

法二:借助伪元素及 text-align:justify

定义如下 HTML 样式:

我们知道,有个 text-align:justify 可以实现两端对齐文本效果。

text-align CSS属性定义行内内容(例如文字)如何相对它的块父元素对齐。text-align 并不控制块元素自己的对齐,只控制它的行内内容的对齐。

text-align:justify 表示文字向两侧对齐。

一开始我猜测使用它可以实现,采用如下 CSS :

结果如下:

 

如若转载,请注明出处:https://www.javaidea.cn/article/7755.html

(0)
上一篇 2022年2月7日 上午10:03
下一篇 2022年2月7日 上午10:03

相关推荐

发表评论

您的电子邮箱地址不会被公开。