DIV+CSS经典??三列布局（左右固定 中间自适应）

 

转自http://www.zendstudio.net/post/52/ 

 

     一直都不断有人在问：“我要用DIV+CSS实现三列布局，并且要左右固定宽度，中间自适应，要怎么弄？”
    我一般都是这样回答：“中间设margin-left留出leftdiv的宽度，设margin-right留出rightdiv的宽度，然后leftdiv左浮动，rightdiv右浮动！”，不过居然有人说不行。我只好用实践证明我的真理的正确性。
    OK!下面是我的完整的测试代码。

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />  
  5. <title>无标题文档</title>  
  6. <style type="text/css">  
  7. <!--   
  8. * {   
  9. margin:0;   
  10. padding:0;   
  11. }   
  12. .box{   
  13. width:100%;   
  14. font-size:12px;   
  15. }   
  16. .leftdiv{   
  17. float:left;   
  18. width:200px;   
  19. height:600px;   
  20. background:#f00;   
  21. }   
  22. .middlediv{   
  23. background:#0f0;   
  24. height:600px;   
  25. margin:0 200px;   
  26. }   
  27. .rightdiv{   
  28. float:right;   
  29. width:200px;   
  30. height:600px;   
  31. background:#00f;   
  32. }   
  33. .clearfix{   
  34. clear:both;   
  35. font-size:0;   
  36. height:0;   
  37. }   
  38. -->  
  39. </style>  
  40. </head>  
  41.   
  42. <body>  
  43. <div class="box">  
  44.    <div class="leftdiv">此处显示  class "leftdiv" 的内容</div>  
  45.   <div class="rightdiv">此处显示  class "rightdiv" 的内容</div>    
  46.   <div class="middlediv">此处显示  class "box" 的内容</div>     
  47.   <div class="clearfix">此处显示  class "clearfix" 的内容</div>  
  48. </div>  
  49. </body>  
  50. </html>  

一定注意三个DIV的顺序！没有修复IE 3px bug，但几乎不影响表现。以上代码在IE 6、FF中测试通过。
从此推断，两列的布局就是去掉右边的DIV，然后中间去掉margin-right。

posted on 2009-04-03 09:15  小小痕  阅读(656)  评论(0)  编辑  收藏  举报

导航