CSS 多列布局问题简单解决方案
多列等高的问题
上例中有包含不同内容的 3 列，可以看出存在的问题是列的背景色随着其包含内容的高度而自适应展开。这是我们要解决的问题。如何使所有的列等高？或具体的说，如何使所有列的高度等于最高列的高度？这很棘手，因为我们不清楚每列将会多高，哪一列是最高的。不能简单的给所有列一个固定的高度，如果内容很少将会导致页面底部有大片空白；如果内容太多则会在文字显示完全前关闭。两种情形都不妥。实际上，内容的长度是动态的，所以每列的高度也是动态的。必须意识到 Web 上没有固定的东东，乡民们有不同的屏幕分辨率，浏览器中的文字也可能被设置为任意大小，所有这些都会影响内容的高度。
分离列内容与其背景色
解决等高问题的第一步是把能分离的破开。方法是每列用两个 div 替代原来的一个。第一个 div 用来放内容，另一个用来作背景色。分离使我们可以单独控制这些额外的元素，之后用更有效的方法把它们放在一起。答案呼之欲出。
浮动的容器的高度始终取决于其浮动的内容（高度）
这是本文多列等高方法的核心。 使一个 div 的高度等于最高列高度的唯一方法是这个 div 包含所有的列。换句话说，通过把所有的列放在一个容器中，容器的高度就是最高列的高度。这是个非常有用的结构。
3列 HTML div 结构
上例中 3 个内容列在一个 div 容器中。
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>3 列 CSS
下面是使 div 容器等高于最高列的 CSS。
#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 必须浮动（左或右），同时每一个内容列的 div 也要浮动，哪种方式并不重要。浮动内容 div 的进程使它们在页面中排列在一条水平线上。浮动容器使其自适应到最高列的高度。如果不浮动容器，内容 div 将会从容器底部溢出，容器不会拥有正确的高度。事实上在此例中，容器不浮动的话其最终高度为0。
增加额外嵌套的容器
下一步是增加额外的容器，它们彼此嵌套。我们需要容器的数量等于列的数量：3。这 3 个容器用作各列的背景。请注意，我们去除了原始列的背景色，并将其加至容器上。
3列 HTML div 结构
两个额外的容器加至下面的 HTML 中。
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
