我
CSS 多列等高如何实现?
难度:
- 利用
padding-bottom
|margin-bottom
正负值相抵,不会影响页面布局的特点。设置父容器设置超出隐藏(overflow: hidden
),这样父容器的高度就还是它里面的列没有设定padding-bottom
时的高度,当它里面的任一列高度增加了,则父容器的高度被撑到里面最高那列的高度,其他比这列矮的列会用它们的padding-bottom
补偿这部分高度差。 - 利用
table-cell
所有单元格高度都相等的特性,来实现多列等高。 - 利用 flex 布局中项目
align-items
属性默认为stretch
,如果项目未设置高度或设为auto
,将占满整个容器的高度 的特性,来实现多列等高。