多列等高布局

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

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》

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 12,113评论 1 91
  • 使用纯 CSS 实现 500px 照片列表布局 文章很长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读...
    HZ充电大喵阅读 1,618评论 0 4
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    wzhiq896阅读 1,036评论 0 2
  • 选择qi:是表达式 标签选择器 类选择器 属性选择器 继承属性: color,font,text-align,li...
    love2013阅读 1,119评论 0 11
  • 你要身体棒棒好,合理膳食少不了。小麦玉米和水稻,辅食红薯是个宝。
    行成于思业精于勤阅读 159评论 0 0