wordpress站点很多都用到了自适应两列布局。
自适应两列布局，指的是在两列布局中，其中一列的宽度是固定死的，而另外一列的宽度自适应。
如果使用浮动来做，只可以实现固定的左右两列布局，并不可以实现其中一列是自适应的布局。
案例的代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
#main,#sidebar{
float: left;
color: white;
}
#main{
width: 100%;
margin-right: -200px;
background-color: hotpink;
}
#sidebar{
width: 200px;
background-color: lightskyblue;
}
/* 防止浏览器可视区域宽度不足时发生文本重叠 */
#main p{
margin-right: 210px;
/* 它是200px + 10px，10px是他们的间距 */
}
</style>
</head>
<body>
<div id="main"><p>这是主体部分，自适应宽度</p></div>
<div id="sidebar"><p>这是侧边栏部分，固定宽度</p></div>
</body>
</html>浏览器预览效果如下图：
我们再通过调整浏览器的宽度，就可以清晰地看出自适应两列布局的实际效果。
