Web页面中八种创建多列等高(等高列布局)的实现技术

#container1 {
float: left;
width: 100%;
background: orange;
position: relative;
right: 40%;/*大小等于col2的宽度*/
}

#col1 {
float:left;
width:26%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 72%;/*距左边呀增加2%就成72%*/
overflow: hidden;
}
#col2 {
float:left;
width:36%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 76%;/*距左边有三个padding为2%,所以距离变成76%*/
overflow: hidden;
}
#col3 {
float:left;
width:26%;/*增加了2%的padding，所以宽度减少4%*/
position: relative;
left: 80%;/*距左边5个padding为2%，所以距离变成80%*/
overflow: hidden;
}
</style>

上面展示的是三列的，下面我们在来看一下两列和更多列的模板：

两列的HTML Markup：

复制代码
<div id=”container2″ >
<div id=”container1″ >
<div id=”col1″ >Column 1 </div>
<div id=”col2″ >Column 2 </div>
</div>
</div>

两列的CSS Code:

复制代码
<style type=”text/css” >
#container2 {
float: left;
width: 100%;
background: orange;
position: relative;
overflow: hidden;
}
#container1 {
float: left;
width: 100%;
background: green;
position: relative;
right:30%;
}
#col1 {
width: 66%;
float: left;
position: relative;
left: 32%;
}
#col2 {
width: 26%;
float: left;
position: relative;
left: 36%;
}
</style>

四列的HTML Markup：

复制代码
<div id=”container4″ >
<div id=”container3″ >
<div id=”container2″ >
<div id=”container1″ >
<div id=”col1″ >col1</div>
<div id=”col2″ >col2</div>
<div id=”col3″ >col3</div>
<div id=”col4″ >col4</div>
</div>
</div>
</div>
</div>

四列的CSS　Code：

复制代码
<style type=”text/css” >
#container4 {
float: left;
width: 100%;
background: green;
position: relative;
overflow: hidden;
}

#container3 {
float: left;
width: 100%;
background: #B2F0F9;
position: relative;
right: 20%;/*此值等于col4的宽度*/
}

#container2 {
float: left;
width: 100%;
background: #89FFA2;