css设置多列等高布局的方法示例

不考虑可扩展性，只需要将padding-bottom/margin-bottom ，设置为最高列与最低列相差高度值，就可以得到等高效果。
考虑扩展性，为了防止将来可能某列高度大量的增加或减少，所有，我们设置了一个比较大的值。

技术点

background 会填充内边距 padding，而不会填充外边距 margin 。margin具有坍塌性，可以设置负值。
float:left。使用float，元素会脱离文档流，使其浮动至最近的文档流元素。在这里的作用是，将三个div元素并排。
overflow:hidden; 设置overflow属性为hidden，同时会产生 块级格式化上下文(BFC)，消除float带来的影响。同时，根据需要，会截取内容以适应填充框，将超出容器的部分隐藏。

HTML结构

<div class="box">
 <div class="left"></div>
 <div class="center"></div>
 <div class="right"></div>
</div>

CSS

.box {
overflow: hidden;
}
.box > div{
/**
* padding-bottom 设置比较大的正值。
* margin-bottom 设置绝对值大的负值。
**/
padding-bottom: 10000px;
margin-bottom: -10000px;
float:left;
width:30%;
}
.left {
background-color: greenyellow;
}
.center {
background-color: gray;
}
.right {
background-color: yellowgreen;
}

4. 假等高布局，背景视觉效果

技术点： float浮动，并设置每一列的宽度。设置父元素为行内块级元素，之后再利用线性渐变的图片来设置父元素的背景凸显等高的效果

CSS

linear-gradient

函数用于创建一个表示两种或多种颜色线性渐变的图片。

display: inline-block

，设置为行内块级元素。

<div class="box five-columns">
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
<div class="col"></div>
</div>

css

/** 需要自己算出平均每列的宽度 */
.box {
 display: inline-block;
 background: linear-gradient(
 to right, 
 red, 
 red 20%,
 blue 20%,
 blue 40%,
 yellow 40%,
 yellow 60%,
 orange 60%,
 orange 80%,
 grey 80%,
 grey);
} 
.col {
 float: left; 
 width: 16%;
 padding: 2%;
}