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

 

如图所示，三栏布局中，左右固定宽度，中间自适应有很多总解决方法，之前也看过一篇文章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>

点击查看示例

Copyright playgoogle.com© 2008

继续阅读《三栏布局，左右固定宽度，中间自适应的一种解决方案》的全文内容...

相关文章:

可同时区分IE8、IE7、IE6、Firefox3、Firefox2的CSS hacks  (2009-8-10 10:47:28)

让IE6瞬间崩溃的5种方式  (2009-6-22 10:39:33)

【收藏】CSS技巧教程资源大全  (2009-6-17 13:29:55)

【收藏】字体、排版简明入门  (2009-4-1 10:58:52)

WebKit私有属性介绍  (2009-3-13 21:32:5)

---

最新评论:

• 2009-8-28 10:9:29，mj623ok ： 我有些不明白，请教一下。
  设置#middle{float:left; width:100%;}我知道肯定会让#middle层下移，因为宽度是以父层的宽度来计算的。可是为什么加上margin:0 -200px;后，这个div就不会下移呢？麻烦博主给我解释一下，谢谢了
• 2009-8-21 14:18:48，DanielChow ： 博客非常不错！写东西很实在，完全没有虚夸浮躁之风很佩服！
  
  
  //有的页面右边的divSidebar，高度溢出了。