2022-09-19CSS00
请注意,本文编写于 584 天前,最后修改于 584 天前,其中某些信息可能已经过时。

CSS 多列等高如何实现?

(1)利用padding-bottom|margin-bottom正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏(overflow:
hidden),这样父容器的高度就还是它里面的列没有设定padding-bottom时的高度,当它里面的任一列高度增加了,则
父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom补偿这部分高度差。

(2)利用table-cell所有单元格高度都相等的特性,来实现多列等高。

(3)利用flex布局中项目align-items属性默认为stretch,如果项目未设置高度或设为auto,将占满整个容器的高度
的特性,来实现多列等高。

详细资料可以参考: 《前端应该掌握的 CSS 实现多列等高布局》 《CSS:多列等高布局》

本文作者:前端小毛

本文链接:

版权声明:本博客所有文章除特别声明外,均采用 BY-NC-SA 许可协议。转载请注明出处!