CSS两列自适应宽度布局

今天在做一个后台界面设计，折腾出了一个最简单的左右两列自适应宽度布局方法，当然不是table，而是严格符合W3C标准的CSS布局。

这里说的两列自适应，其实是其中一列固定宽度，而让另一列自适应浏览器窗口变化。方法是让其中一列设定固定宽度，然后浮动，再设定另一列的外边距，大小和固定列的宽度相等即可。

示例代码如下：

DIV结构：

<div id="sidebar"></div>
<div id="content"></div>

CSS样式：

//左列固定宽度，右列自适应

#sidebar{width:180px;float:left;}
#content{margin-left:180px;}

//右列固定宽度，左列自适应

#sidebar{width:180px;float:right;}
#content{margin-right:180px;}

呵呵，是不是超级简单啊，当然这是实现的基本原型，你也可以再加上head,foot部分，丰富这个原型框架。^_^

作者：影子超
原载：影子超博客
尊重版权，转载请保留作者及原载地址链接。