高度相等列在Web页面设计中永远是一个网页设计师的需求。如果所有列都有相同的背景色，高度相等还是不相等都无关紧要，因为你只要在这些列的父元素中设置一个背景色就可以了。但是，如果一个或多个列需要单独设置自己的背景色，那么它的视觉完整性的设计就显得非常重要了。大家都知道当初Table实现等高列布局是多么的简单，但是我们使用CSS来创建等高列布局并非是那么容易的事情。
如果一个设计是固定宽度（非流体的宽度设计），那么实现多列等高效果是相当的容易。最好的技术就是使用Dan Cederholm的Faux Columns技术。只要制作一张合适的背景图片，在你多列的父元素中进行垂直铺放，从而达到一种假像（假的多列等高布局效果）。但是在流体布局中要用CSS实现多列等高的设计那就不是那么容易的事情，因为我们没有办法在使用背景图片来实现多列等高的假像了，那么是不是就没有办法实现了呢？那当然不是那么回事了，不管是实现固定布局还是流体布局的等多列等高视觉效果，方法还是蛮多的，这些方法体现了CSS的不同技术，也各有千秋，下面我们就一起来探讨Web页面中的多列等高的实现技术。
下面要介绍的方法都是让我们的布局如何实现多列的等高视觉效果，正如下图所示：
一、假等高列
这种方法是我们实现等高列最早使用的一种方法，就是使用背景图片，在列的父元素上使用这个背景图进行Y轴的铺放，从而实现一种等高列的假像：
Html Markup
正padding-bottom和负marign-bottom，相互低消法：
.container{ 940px; margin:0 auto; overflow:hidden; border:2px solid blue; } .left{ float:left; 150px; background:#ccc; padding-bottom:2000px; margin-bottom:-2000px; } .right{ float:left; 450px; margin-left:50px; background:red; padding-bottom:2000px; margin-bottom:-2000px; } </style> </head> <body> <div class="container"> <div class="left">我是left</div> <div class="right">我是right<br><br><br>现我是right<br><br><br>现我是right<br><br><br>现我是right<br><br><br>现在我的高度比left高，但left用它的padding-bottom补偿了这部分高度</div> </div>
http://www.cnblogs.com/2050/archive/2012/07/31/2616460.html
http://www.w3cplus.com/css/creaet-equal-height-columns
display：table-cell
实现等高布局，毫无疑问，display:table-cell是首选，这就好比鼹鼠，生下来就是为了打洞用的。考虑到匿名创建表格元素的问题，所有table-cell元素外一定要留有一个用来包裹的标签。于是，我们有类似下面的CSS代码：
.list_row{display:table-row;}
.list_cell{display:table-cell; 30%; padding:1.6%; background-color:#f5f5f5;}
/*中间一个元素背景淡蓝，有别于两边的淡灰色*/
.list_center{background-color:#f0f3f9;}
<div class="list_row">
<div class="list_cell">你一定也有过这种感觉的。...罗兰《寂寞的感觉》</div>
<div class="list_cell list_center">作为一个被基阿异捅过...水，四积阴功五读书。</div>
<div class="list_cell">奔波了一...永远幸福快乐！</div>
</div>