三栏布局，左右固定宽度，中间自适应的一种解决方案 - CSS+DIV

三栏布局，左右固定宽度，中间自适应的一种解决方案 - CSS+DIV

 

如图所示，三栏布局中，左右固定宽度，中间自适应有很多总解决方法，之前也看过一篇文章In Search of the Holy Grail ，不过，就我个人而言，跟喜欢通过margin的负值来达到这种效果。

核心CSS代码：

#content{background:#ff6;}
#left,#right{width:200px;background:#fc0;float:left;}
#middle{float:left; width:100%;margin:0 -200px;}
#middle .inner{margin:0 200px;background:#ccc;}
#right{float:right;}

DOM 结构：

<div id=\"content\" class=\"clearfix\">
    <div id=\"left\">
    </div>
    <div id=\"middle\">
    </div>
    <div id=\"right\">
    </div>
</div>