CSS 多列布局问题简单解决方案

增加额外嵌套的容器

下一步是增加额外的容器，它们彼此嵌套。我们需要容器的数量等于列的数量：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>

3 列 CSS

所有元素左浮动，容器宽度设为100%，使他们占满页面的宽度。背景色从内容 div 移除并加至容器上。

#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
}
#container1 {
float:left;
width:100%;
background:red;
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}

用相对定位移动容器

现在用相对定位把容器移至新的位置。移动后 div 如下图所示。即等高列背景容器的层叠和位置。为了显示右侧的绿色列 container2 向左移了30%，为了显示中间的黄色列 container1 向左移动了40%，与此同时红色部分依然可见作为左侧列。

相对定位的 CSS

下面是添加了相对定位的CSS。

#container3 {
float:left;
width:100%;
background:green;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:30%;
}
#col2 {
float:left;
width:40%;
}
#col3 {
float:left;
width:30%;
}

将每列的内容移回

下一步是把每列的内容移回到页面上，使之排列在下面的背景色上。再次使用简单的相对定位来完成它。