多栏等高布局

这里详细总结了等高布局的八大方法 Click，我再谈谈实际项目中比较常用的，或者说比较简单的三种方法。

图片模拟

比如我们需要做一个上图的布局，那么需要截取这样一个侧边的小图片对侧边和内容部分包裹的元素进行背景平铺，用来模拟出侧边栏的高度跟内容高度一致的视觉效果。

table布局

只需要将需要等高的若干栏设置display属性为table-cell；若其中一列希望是自适应宽度，还需将父元素的display设置成table，width为100%。

代码如下：

<style>
    #main {display: table;width: 100%}
    .m_content {display: table-cell;width: auto;}
    .m_rightside {display: table-cell;width: 200px;}
</style>

<div id="main">
    <div class="m_content"></div>
    <div class="m_rightside"></div>
</div>

padding补白

这是前不久在网上看到的一种办法，实质就是为栏目添加一个足够大的padding-bottom值，将栏目撑开，然后再添加相同大小的负的margin-bottom值将内容移动回来。注意要在负盒子上加上overflow: hidden的属性。

代码如下：

<style>
    #main {width: 100%;overflow: hidden;}
    .m_content {width: auto;float:left;}
    .m_rightside {width: 200px;padding-bottom: 10000px;margin-bottom: 10000px;float:left;}
</style>

<div id="main">
    <div class="m_content"></div>
    <div class="m_rightside"></div>
</div>

CSS2的布局方法总结得到这里就告一段落了。现在来看看CSS3新增的布局方法。