芒果小站

之前芒果介绍过自适应网页宽度的浏览器兼容方法，针对不同的分辨率提供了很好的解决方法。在网页设计中，两列自适应宽度也经常用到。多见为一列固定宽度，一列自适应宽度。下面是两种简单的两列自适应布局：

1. 左列固定，右列自适应宽度
HTML 代码为：

<div id="wrapper">id "wrapper"
  <div id="left">id "left"</div>
  <div id="right">id "right"</div>
</div>

CSS 代码为：

#wrapper {border:10px solid #999999;background-color:#999999;}
#left {float:left;width:200px;background-color:#CCCCCC;}
#right {margin-left:210px;background-color:#CCCCCC;}

2. 右列固定，左列自适应宽度
HTML 代码为：

<div id="wrapper">id "wrapper"
  <div id="right">id "right"</div>
  <div id="left">id "left"</div>
</div>

CSS 代码为：

#wrapper {border:10px solid #999999;background-color:#999999;}
#left {margin-right:210px;background-color:#CCCCCC;}
#right {float:right;width:200px;background-color:#CCCCCC;}

这里紧紧提供了布局框架，可以按需要修改代码。