标签：
这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。
html代码
<div id="wrap"> <div id="left"> <p> left</p> <p> left</p> <p> left</p> <p> left</p> <p> left</p> </div> <div id="center"> <p> center</p> <p> center</p> <p> center</p> <p> center</p> <p> center</p> <p> center</p> <p> center</p> <p> center</p> <p> center</p> </div> <div id="right"> <p> right</p> <p> right</p> <p> right</p> </div> </div>
css代码
* { margin: 0; padding: 0; } #wrap { overflow: hidden; width: 1000px; margin: 0 auto; } #left, #center, #right { margin-bottom: -10000px; padding-bottom: 10000px; } #left { float: left; width: 250px; background: #00FFFF; } #center { float: left; width: 500px; background: #FF0000; } #right { float: right; width: 250px; background: #00FF00; }
优点：
这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器
缺点：
这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果。
下面我们就针对这个缺陷来介绍两种解决办法，第一种是使用背景图来模仿底部（或顶部）边框；第二种方法是使用div来模仿列的边框，下面我们来看这两种方法：
纯css实现div三列等高布局的最简单方法简化版/也可以多列
标签：
原文地址：http://www.cnblogs.com/zhrn/p/4466880.html
