Skip to content
登录后刷题更便捷

CSS 多列等高如何实现?

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

内容仅供参考,难免有不恰当的地方,如果有问题欢迎及时反馈
部分内容来自网络,如果不慎侵犯您的权益,请联系我们,以便及时删除侵权内容