背景

多列等高布局在很多场景下都会用到（新闻栏，面试，等等）。这里介绍一个主流的方案。

在多列的布局中，包含块的高度是被内部的内容撑起来的，其高度是各个列中最高的那个，那么如何让较低的块也能到达最高的高度呢？请看下面的代码和说明

代码

  1. <!DOCTYPE html>  
  2. <html>  
  3. <head>  
  4. <meta charset="utf-8" />  
  5. <title>多列等高布局</title>  
  6. <style>  
  7. body{   
  8.     padding:0;  
  9.     margin:0;  
  10.     color:#f00;  
  11. }  
  12. .container{   
  13.     margin:0 auto;   
  14.     width:300px;   
  15.     border:3px solid #00C;  
  16.     overflow:hidden;  
  17. }  
  18. .left{   
  19.     float:left;   
  20.     width:150px;   
  21.     background:#B0B0B0;  
  22.     padding-bottom:2000px;  
  23.     margin-bottom:-2000px;  
  24. }  
  25. .right{   
  26.     float:left;   
  27.     width:150px;   
  28.     background:#6CC;  
  29.     padding-bottom:2000px;  
  30.     margin-bottom:-2000px;  
  31. }  
  32. </style>  
  33. </head>  
  34. <body>  
  35. <div class="container">  
  36.     <div class="left">left</div>  
  37.     <div class="right">right right right right right right right right right right right right right right right right right right right right right right right right right right right</div>  
  38. </div>  
  39. </body>  
  40. </html>

说明

在这个布局中，关键就是.container的overflow 和 .left、.right的padding-bottom & margin-bottom样式。当我们把.left、.right的padding-bottom设置很大时，这两个块自然后向下延展很长，然后我们设置了margin-bottom为相应的负值，这个设置完后，.left和.right依然向下延展很长。那么我们为什么要这么设置呢？是因为.container 的overflow:hidden生效时，会计算其中每个块的高度，这个高度计算时会将margin-bottom和padding-bottom加到一起，（再加上padding-top、height、margin-top）。这样的话，就和我们没有为.left、.right设置margin-bottom和padding-bottom一样了。由于这个原因，既可以让外部元素.container的高度为其中多列的最高列高度，也可以让里面的每个列延伸到和最高列相等的高度。