CSS 实现多列等高布局

之所以会出现多列等高布局,是因为在网页设计中可能会出现以下状况。

1.png

出现这种情况的原因也很简单,就是各个 div 标签中的 p 所占高度不同,而且我们并没有明确的给 div 一个高度。

之所以没有给 div 指定高度,是因为我们事先并不知道这个标签会占多高,而且就算我们知道,直接为所有 div 硬性的设置一个高度也是没有灵性的做法。

所以我们该怎么办呢?其实核心代码只有三行,如下所示

.container {
    overflow: hidden;
}

div.item {
    padding-bottom: 500px;
    margin-bottom: -500px;
}

设置完以上代码,现在的情况就变成了这样。

2.png

下面来解释它的工作原理,首先, padding-bottom: 500px 会让三个盒子拉伸的非常高,然后利用 margin-bottom: -500px 将各个元素切割掉 500px,最后父元素将超出的部分隐藏,就出现了这个效果。

你可能对切割这个概念非常模糊,所以我推荐你去看以下文章,相信你看完之后就明白了。

《CSS布局奇淫巧计之-强大的负边距》

《负值之美:负margin在页面布局中的应用》

利用 FlexBox

不得不说,上面的方法很好用,不过我们还能够更简洁一点,简洁的让你不敢相信!其实,我们只需要为父布局设置一行 display: flex 就可以了!

而且,之前在没有利用 flex 的时候,我们为了让三个元素保持在同一行,还不得不为每个 div.item 设置浮动属性。

那么为什么 display: flex 就可以完成以上那么多代码才能够完成的任务呢?这依赖于 align-items 属性,它的默认值是 stretch,也就是在辅轴上将所有子项目拉伸为同一高度(或宽度)以保持对齐。

如果你对 flex 了解还不是很了解,那么建议去阅读以下文章。

《A Complete Guide to Flexbox》

坚持原创技术分享,您的支持将鼓励我继续创作!