利用纯CSS创建一个等高多列的布局并不件易事，本教程将着重分析出现在多列布局的多个问题，然后为大家等来一个简单全游览器通吃的解决方法，不使用图片，脚本，CSS hacks并在最严格的XHTML 规范中都能通过验证。
问题的症结所在
.title {color:#ff7200;font-size:23px;line-height:28px}
如上图所示，由于各列的内容不一致导致其背景的高度也不统一。而背景实质上是内容（标准的盒子模型是由内容区，补白区
，边框区与边界区组成，背景存在于前三者中；IE为前两者）的自适应的问题。再转化一下，如何撑大那些较短的列的高度，让所有列的高度等于最高的列的高度？这个，的确很很棘手，因为我们不清楚各列的高度，也无从得知哪一列最高。我们也不能简单地给所有列一个明确的高度，这可能会导致所有列都多出一大片空白，或者很不亏由于高度不足导致某些列的内容无法全部显示出来！现实中，内容的长度是动态的，因此每列的高度也是动态的。我们必须意识到在网络中，不存在”固定“二字，每个人的显示器的分辩率都不尽一样，游览器的字体大小设置也不尽相同，这些都会影响到内容的显示高度。
对内容与背景实行分离
解决等高问题的第一步就是把它拆分为两个较小的，可以单独解决的部分。这样，我们原来是一列对应一个DIV，现在是一列对应一个DIV，一个用来装载内容，一个用来显示背景。这种分离有利于我们对各个元素的掌控和把它们用另一种更有效的方式组合起来，这引起我很快会在下面的章节讲述。
利用浮动嵌套解决最高列的高度的问题。
这是解决多列等高的关键。使一个DIV的高度等于最高列的高度的唯一方法就是让这个DIV包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。
单行三列的布局的结构层代码。
<div id=”container1″>
<div id=”col1″>Column 1</div>
<div id=”col2″>Column 2</div>
<div id=”col3″>Column 3</div>
</div>
对应的表现层代码。
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:40%;
background:yellow;
}
#col3 {
float:left;
width:30%;
background:green;
}
为了使用这种结构在所有游览器都正常工作，我们必须让外层容器往左或右浮动，并且其子元素包含每一栏内容的DIV也跟着浮动，哪一个方向都无所谓。浮动会使用它们往上对齐于外围容器的上补白，并且浮动的容器会自动调整自身的高度与宽度以实现对浮动子元素的包含。但是如果容器被定义了高度与宽度，则它不会随子元素的大小而自动调整自身显示区域来适应子元素的显示。但在IE6与低版本的IE中，子浮动元素能撑开外围元素；幸好IE7与IE8已引正了这个不符合标准的做法。
