纯CSS实现三列DIV等高布局方法揭秘

本文和大家重点讨论一下如何使用纯CSS实现三列DIV等高布局，现在我们来看看真正的CSS实现的等高布局，其方法主要是采用“隐藏容器溢出”、“正内补丁”和“负外补丁”结合的方法实现的。

创新互联建站坚持“要么做到，要么别承诺”的工作理念，服务领域包括：做网站、网站制作、企业官网、英文网站、手机端网站、网站推广等服务，满足客户于互联网时代的柏乡网站设计、移动媒体设计的需求，帮助企业找到有效的互联网解决方案。努力成为您成熟可靠的网络建设合作伙伴！

纯CSS实现三列DIV等高布局

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

现在我们来看看真正的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.  
      3.   
  
  
    3. body,p,ul{margin:0;padding:0;}  
      4.   
  
  
    4. #wrap{overflow:hidden;width:1000px;margin:0auto;}  
      5.   
  
  
    5. #left,#center,#right{margin-bottom:-10000px;padding-bottom:10000px;}  
      6.   
  
  
    6. #left{float:left;width:250px;background:#00FFFF;}  
      7.   
  
  
    7. #center{float:left;width:500px;background:#FF0000;}  
      8.   
  
  
    8. #right{float:right;width:250px;background:#00FF00;}  
      9.   
  
  
    9.  
      10.

    #p#完整代码如下：

     
 
 
        
  
  
    1.   
  
  
    2.  
      3.   
  
  
    3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
      4.   
  
  
    4.  
      5.   
  
  
    5.  
      6.   
  
  
    6.  
      7.   
  
  
    7. CSS等高布局 
      8.   
  
  
    8.  
      9.   
  
  
    9. *{  
      10.   
  
  
    10. margin:0;  
      11.   
  
  
    11. padding:0;  
      12.   
  
  
    12. }  
      13.   
  
  
    13. #wrap{  
      14.   
  
  
    14. overflow:hidden;  
      15.   
  
  
    15. width:1000px;  
      16.   
  
  
    16. margin:0auto;  
      17.   
  
  
    17. }  
      18.   
  
  
    18. #left,#center,#right{  
      19.   
  
  
    19. margin-bottom:-10000px;  
      20.   
  
  
    20. padding-bottom:10000px;  
      21.   
  
  
    21. }  
      22.   
  
  
    22. #left{  
      23.   
  
  
    23. float:left;  
      24.   
  
  
    24. width:250px;  
      25.   
  
  
    25. background:#00FFFF;  
      26.   
  
  
    26. }  
      27.   
  
  
    27. #center{  
      28.   
  
  
    28. float:left;  
      29.   
  
  
    29. width:500px;  
      30.   
  
  
    30. background:#FF0000;  
      31.   
  
  
    31. }  
      32.   
  
  
    32. #right{  
      33.   
  
  
    33. float:right;  
      34.   
  
  
    34. width:250px;  
      35.   
  
  
    35. background:#00FF00;  
      36.   
  
  
    36. }  
      37.   
  
  
    37.  
      38.   
  
  
    38.  
      39.   
  
  
    39.  
      40.   
  
  
    40.  
      41.   
  
  
    41.  
      42.   
  
  
    42. left
       
      43.   
  
  
    43. left
       
      44.   
  
  
    44. left
       
      45.   
  
  
    45. left
       
      46.   
  
  
    46. left
       
      47.   
  
  
    47.  
      48.   
  
  
    48.  
      49.   
  
  
    49. center
       
      50.   
  
  
    50. center
       
      51.   
  
  
    51. center
       
      52.   
  
  
    52. center
       
      53.   
  
  
    53. center
       
      54.   
  
  
    54. center
       
      55.   
  
  
    55. center
       
      56.   
  
  
    56. center
       
      57.   
  
  
    57. center
       
      58.   
  
  
    58. center
       
      59.   
  
  
    59. center
       
      60.   
  
  
    60. center
       
      61.   
  
  
    61. center
       
      62.   
  
  
    62. center
       
      63.   
  
  
    63. center
       
      64.   
  
  
    64. center
       
      65.   
  
  
    65. center
       
      66.   
  
  
    66. center
       
      67.   
  
  
    67. center
       
      68.   
  
  
    68. center
       
      69.   
  
  
    69.  
      70.   
  
  
    70.  
      71.   
  
  
    71. right
       
      72.   
  
  
    72. right
       
      73.   
  
  
    73. right
       
      74.   
  
  
    74.  
      75.   
  
  
    75.  
      76.   
  
  
    76.  
      77.   
  
  
    77.  
      78.   
  
  
    78.  
      79.

     文章出处：标准之路(http://www.aa25.cn/css_example/858.shtml)

    【编辑推荐】

    1. ASP.NET2.0中CSS失效解决方案
    2. CSS样式表特点及嵌入网页的四种途径
    3. 三种方法实现CSS样式表插入
    4. CSS外边距设置属性margin用法
    5. 探究CSS高级语法中选择器分组和CSS继承用法

    当前题目：纯CSS实现三列DIV等高布局方法揭秘
    网站URL：http://www.csdahua.cn/qtweb/news18/84768.html

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

    广告

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

    成都快上网为您推荐相关内容

    电子商务知识

    各行业网站

    成都网站设计　　 　手机网站建设　　 　四川主机托管　　 　成都二枢机房　　 　微信公众号二次开发　　 　成都多线服务器托管　　 　成都西云机房　　 　成都网站建设　　 　护栏打桩机　　 　成都企业网站制作　　 　免备案空间腾讯云　　 　顺泽窗帘　　 　网站定制　　 　广汉柴油发电机　　 　四川雅安服务器托管　　 　成都工装公司　　 　成都服务器托管　　 　成都网络公司　　 　免备案虚拟主机　　 　古巴雪茄