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

核心CSS代码:

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

DOM 结构:

  1. <div id="content" class="clearfix">
  2.     <div id="left">
  3.     </div>
  4.     <div id="middle">
  5.     </div>
  6.     <div id="right">
  7.     </div>
  8. </div>

点击查看示例