分享用纯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等高布局的方法
    分享网址：http://www.hantingmc.com/qtweb/news15/545965.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    网站改版知识

    各行业网站

    兴宏源活动板房　　 　绵阳服务器托管　　 　成都画册设计公司　　 　成都发电机维修　　 　成都酒店服定制　　 　友益建筑机械凿　　 　成都广告招牌制作　　 　绵竹做网站　　 　简阳网站制作　　 　光华服务器托管　　 　成都网络营销　　 　成都口碑营销公司　　 　成都商城app开发　　 　网站设计　　 　成都定制网页设计　　 　青羊区雕琢时光　　 　免费收录网站　　 　UI设计　　 　西部信息服务器托管　　 　成都模板网站