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。

你可能感兴趣的:(div+css)