如何实现多列等高布局？

其实现原理就是给每一列添加相对应用的容器，并进行相互嵌套，并在每个容器中设置背景色。这里需要提醒大家你有多少列就需要多少个容器，比如说我们说的三列，那么你就需要使用三个容器。

以三列布局为例，具体实现如下：

<div id="container3"> 
   <div id="container2"> 
      <div id="container1"> 
           <div id="col1">Column 1</div> 
           <div id="col2">Column 2</div> 
           <div id="col3">Column 3</div> 
      </div> 
   </div> 
</div>

#container3 { 
  float: left; 
  width: 100%; 
  background: green;
  overflow: hidden; 
  position: relative; 
}

#container2 { 
  float: left; 
  width: 100%; 
  background: yellow; 
  position: relative; 
  right: 30%; /*大小等于col3的宽度*/ 
}
 
#container1 { 
  float: left; 
  width: 100%; 
  background: orange; 
  position: relative; 
  right: 40%;/*大小等于col2的宽度*/
} 

#col1 { 
  float:left; 
  width:26%;/*增加了2%的padding，所以宽度减少4%*/ 
  position: relative; l
  eft: 72%;/*距左边呀增加2%就成72%*/ overflow: hidden; 
} 

#col2 { 
  float:left; 
  width:36%;/*增加了2%的padding，所以宽度减少4%*/   
  position: relative; left: 76%;/*距左边有三个padding为2%,所以距离变成76%*/ 
  overflow: hidden; 
} 

#col3 { 
  float:left; 
  width:26%;/*增加了2%的padding，所以宽度减少4%*/ 
  position: relative; 
  left: 80%;/*距左边5个padding为2%，所以距离变成80%*/ 
  overflow: hidden; 
} 

实现过程解析：
我们有三列，并且也说过了，这三列内容都放在了三个容器的div中，我们每一列的背景色不是放在内容列中，而是放置在容器中，现在我们需要通过对容器进行相对定位，把背景显示出来，而且我们这个容器是最外层的不能进行相对定位的移动，具体的请看下图：

三列等高布局实现过程

上面我们把容器进行了相对定位，这样一来，我们内容也相应的做了移动，现在我们需要对页面列的内容也进行相对定位，并把内容和容器进行相反方向的定位，这样内容和容器背景色就能对应上了，请看下图所展示的：

三列等高布局实现过程

最后为了让你的效果更加好看一点，你可以尝试给他们加上padding，比如说每列加上2%的padding值，具体实现可以简单从下图中得到：

三列等高布局加padding实现过程

优点：
兼容各浏览器，可以制作流体等高列，无列数限制。
缺点：
标签使用较多，结构过于复杂，不易于理解，不过你掌握了其原理也就不难了，这也不算太大缺点。

转自 八种创建等高列布局的部分内容