position: relative;
right: 30%;/*此值等于col3的宽度*/
}
#container1 {
float: left;
width: 100%;
background: #369;
position: relative;
right: 30%;/*此值等于col2的宽度*/
}
#col1 {
width: 18%;/*1%的padding*/
float: left;
position: relative;
left: 81%;
overflow: hidden;
}
#col2 {
float: left;
width: 28%;
position: relative;
left: 83%;
overflow: hidden;
}
#col3 {
float: left;
width: 28%;
position: relative;
left: 85%;
overflow: hidden;
}
#col4 {
float: left;
width: 18%;
position: relative;
left: 87%;
overflow: hidden;
}
</style>
下面来看其实现过程，如果你理解了第二制作方法，那么这个你不用想一下就知道他们是一样的道理，如果你对第二种方法还不够清楚，那么你接着看这下面的内容，你会更清楚他们是怎么一回事的。下面我们一起来看三列的实现过程：
上图展示了，我们有三列，并且也说过了，这三列内容都放在了三个容器的div中，我们每一列的背景色不是放在内容列中，而是放置在容器中，现在我们需要通过对容器进行相对定位，把背景显示出来，而且我们这个容器是最外层的不能进行相对定位的移动，具体的请看下图：
上面我们把容器进行了相对定位，这样一来，我们内容也相应的做了移动，现在我们需要对页面列的内容也进行相对定位，并把内容和容器进行相反方向的定位，这样内容和容器背景色就能对应上了，请看下图所展示的：
接下来我们需要把溢出的部分切掉去，和前面一相，在最外面的容器加上overflow:hidden；这样就OK了。
最后为了让你的效果更加好看一点，你可以尝试给他们加上padding，比如说每列加上2%的padding值，具体实现可以简单从下图中得到：
优点：
兼容各浏览器，可以制作流体等高列，交无列数限制。
缺点：
标签使用较多，结构过于复杂，不易于理解，不过你掌握了其原理也就不难了，这也不算太大缺点。
三、创建带边框的现列等高布局
平常在制作中，我们需要制作两列的等高效果，并且有一条边框效果，那么这个实例我们就一起来看其实现方法：
Html Code
复制代码
<div id=”wrapper” >
<div id=”sidebar” >
…..
</div>
<div id=”main” >
….
