多列等高布局

来源：互联网发布：手机淘宝如何用优惠券编辑：程序博客网时间：2024/04/27 12:45

1.背景

多列等高布局在很多场景下都会用到（新闻栏，面试，等等）。这里介绍一个主流的方案。

在多列的布局中，包含块的高度是被内部的内容撑起来的，其高度是各个列中最高的那个，那么如何让较低的块也能到达最高的高度呢？请看下面的代码和说明

2.代码

<!DOCTYPE html><html><head><meta charset="utf-8" /><title>多列等高布局</title><style>body{     padding:0;    margin:0;    color:#f00;}.container{     margin:0 auto;     width:300px;     border:3px solid #00C;    overflow:hidden;}.left{     float:left;     width:150px;     background:#B0B0B0;    padding-bottom:2000px;    margin-bottom:-2000px;}.right{     float:left;     width:150px;     background:#6CC;    padding-bottom:2000px;    margin-bottom:-2000px;}</style></head><body><div class="container">    <div class="left">left</div>    <div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right</div></div></body></html>

3.说明

在这个布局中，关键就是.container的overflow 和 .left、.right的padding-bottom & margin-bottom样式。当我们把.left、.right的padding-bottom设置很大时，这两个块自然后向下延展很长，然后我们设置了margin-bottom为相应的负值，这个设置完后，.left和.right依然向下延展很长。那么我们为什么要这么设置呢？是因为.container 的overflow:hidden生效时，会计算其中每个块的高度，这个高度计算时会将margin-bottom和padding-bottom加到一起，（再加上padding-top、height、margin-top）。这样的话，就和我们没有为.left、.right设置margin-bottom和padding-bottom一样了。由于这个原因，既可以让外部元素.container的高度为其中多列的最高列高度，也可以让里面的每个列延伸到和最高列相等的高度。

阅读全文

1 0