自贡网站建设公司

分享用纯CSS实现三列DIV等高布局的方法

DIV等高布局，我想很多人都遇见过，我也看过不少的方法，有的是通过背景图片，实现假象的等高效果；还有的用js实现等等。这些都是方法，但是现在都不用以上的方法，来个真正的纯css实现等高！

成都创新互联专业为企业提供东明网站建设、东明做网站、东明网站设计、东明网站制作等企业网站建设、网页设计与制作、东明企业网站模板建站服务，10年东明做网站经验，不只是建网站，更提供有价值的思路和整体网络服务。

现在我们来看看真正的 CSS 实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。 下面来看看实际的例子（三列等高），以下面的 XHTML 代码为例：

html代码：

 
 
 
    
  
  
  
  1.  
    2.   
  
  
  2.  
    3.   
  
  
  3. left
     
    4.   
  
  
  4. left
     
    5.   
  
  
  5. left
     
    6.   
  
  
  6. left
     
    7.   
  
  
  7. left
     
    8.
 
  •  

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     

  • center

     
  •  
  •  

  • right

     

  • right

     

  • right

     
  •  
  •  

    css代码：

     
 
 
      
  
  
  
    1.   
      2.   
  
  
    2. body, p, ul { margin:0; padding:0; }  
      3.   
  
  
    3. #wrap { overflow:hidden; width:1000px; margin:0 auto; }  
      4.   
  
  
    4. #left, #center, #right { margin-bottom:-10000px; padding-bottom:10000px; }  
      5.   
  
  
    5. #left { float:left; width:250px; background:#00FFFF; }  
      6.   
  
  
    6. #center { float:left; width:500px; background:#FF0000; }  
      7.   
  
  
    7. #right { float:right; width:250px; background:#00FF00; }  
      8.   
  
  
    8.  
      9.   
  
  
    9.   
      10.   
  
  
    10.   
      11.   
  
  
    11.   
      12.   
  
  
    12.   
      13.   
  
  
    13. CSS等高布局  
      14.   
  
  
    14.   
      15.   
  
  
    15. *{  
      16.   
  
  
    16. margin:0;  
      17.   
  
  
    17. padding:0;  
      18.   
  
  
    18. }  
      19.   
  
  
    19. #wrap{  
      20.   
  
  
    20. overflow:hidden;  
      21.   
  
  
    21. width:1000px;  
      22.   
  
  
    22. margin:0 auto;  
      23.   
  
  
    23. }  
      24.   
  
  
    24. #left,#center,#right{  
      25.   
  
  
    25. margin-bottom:-10000px;  
      26.   
  
  
    26. padding-bottom:10000px;  
      27.   
  
  
    27. }  
      28.   
  
  
    28. #left{  
      29.   
  
  
    29. float:left;  
      30.   
  
  
    30. width:250px;  
      31.   
  
  
    31. background:#00FFFF;  
      32.   
  
  
    32. }  
      33.   
  
  
    33. #center{  
      34.   
  
  
    34. float:left;  
      35.   
  
  
    35. width:500px;  
      36.   
  
  
    36. background:#FF0000;  
      37.   
  
  
    37. }  
      38.   
  
  
    38. #right{  
      39.   
  
  
    39. float:right;  
      40.   
  
  
    40. width:250px;  
      41.   
  
  
    41. background:#00FF00;  
      42.   
  
  
    42. } 
      43.  
 
 
     
 
 
      
  
  
  
    1.  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6. left
       
      7.   
  
  
    7. left
       
      8.   
  
  
    8. left
       
      9.   
  
  
    9. left
       
      10.   
  
  
    10. left
       
      11.   
  
  
    11.  
      12.   
  
  
    12.  
      13.   
  
  
    13. center
       
      14.   
  
  
    14. center
       
      15.   
  
  
    15. center
       
      16.   
  
  
    16. center
       
      17.   
  
  
    17. center
       
      18.   
  
  
    18. center
       
      19.   
  
  
    19. center
       
      20.   
  
  
    20. center
       
      21.   
  
  
    21. center
       
      22.   
  
  
    22. center
       
      23.   
  
  
    23. center
       
      24.   
  
  
    24. center
       
      25.   
  
  
    25. center
       
      26.   
  
  
    26. center
       
      27.   
  
  
    27. center
       
      28.   
  
  
    28. center
       
      29.   
  
  
    29. center
       
      30.   
  
  
    30. center
       
      31.   
  
  
    31. center
       
      32.   
  
  
    32. center
       
      33.   
  
  
    33.  
      34.   
  
  
    34.  
      35.   
  
  
    35. right
       
      36.   
  
  
    36. right
       
      37.   
  
  
    37. right
       
      38.   
  
  
    38.  
      39.   
  
  
    39.  
      40.   
  
  
    40.  
      41.   
  
  
    41.  
      42.

    标题名称：分享用纯CSS实现三列DIV等高布局的方法
    URL网址：http://jxruijie.cn/article/cdgjjep.html

    其他资讯