</div>
</div>
CSS Code:
复制代码
<style type=”text/css” >
html {
background: #45473f;
height: auto;
}
body {
width: 960px;
margin: 20px auto;
background: #ffe3a6;
border: 1px solid #efefef;
}
#wrapper {
display: inline-block;
border-left: 200px solid #d4c376;
position:relative;
vertical-align: bottom;
}
#sidebar {
float: left;
width: 200px;
margin-left: -200px;
margin-right: -1px;
border-right: 1px solid #888;
position: relative;
}
#main {
float: left;
border-left: 1px solid #888;
}
#maing,
#sidebar{
padding-bottom: 2em;
}
</style>
优点：
可以制作带有边框的两列等高布局，并能兼容所有浏览器，结构简单明了。
缺点：
不适合于更多列的应用，比如说三列以上，这样的方法就行不通了。
四、使用正padding和负margin对冲实现多列布局方法
这种方法很简单，就是在所有列中使用正的上、下padding和负的上、下margin，并在所有列外面加上一个容器，并设置overflow:hiden把溢出背景切掉。下面一起来看代码：
HTML Markup:
复制代码
<div id=”container” >
<div id=”left” class=”column aside” >
<p>Sidebar</p>
</div>
<div id=”content” class=”column section” >
<p>Main content </p>
</div>
<div id=”right” class=”column aside” >
<p>Sidebar</p>
</div>
</div>
CSS Code:
复制代码
<style type=”text/css” >
#container {
margin: 0 auto;
overflow: hidden;
width: 960px;
}
.column {
background: #ccc;
float: left;
width: 200px;
margin-right: 5px;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
#content {
background: #eee;
}
#right {
float: right;
margin-right: 0;
}
</style>
优点：
这种可能实现多列等高布局，并且也能实现列与列之间分隔线效果，结构简单，兼容所有浏览器
缺点：
这种方法存在一个很大的缺陷，那就是如果要实现每列四周有边框效果，那么每列的底部（或顶部）将无法有边框效果。
下面我们就针对这个缺陷来介绍两种解决办法，第一种是使用背景图来模仿底部（或顶部）边框；第二种方法是使用div来模仿列的边框，下面我们来看这两种方法：
