代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>等高布局——会员中心页面比较常用</title> <style> body{ margin: 0; padding: 0;} .container{ width: 600px; margin: 20px auto; border:3px solid #ccc; overflow: hidden;} .leftBox{ float: left; width: 150px; background: #ddd; padding-bottom: 20000px; margin-bottom: -20000px;/*等高布局精髓*/} .rightBox{ float: left; width: 450px; background: #ffecd9; padding-bottom: 20000px; margin-bottom: -20000px;/*等高布局精髓*/} </style> </head> <body> <h3 style="text-align:center;">等高布局小实例</h3> <div class="container"> <div class="leftBox">我是左侧内容</div> <div class="rightBox"> <p>我是右侧内容</p> <p>现在我这边的内容比左边多，所以就比左侧高</p> <p>但是left用了padding-bottom补偿了这部分高度</p> <p>所以就实现了等高布局</p> </div> <div style="clear:both"></div> </div> </body> </html>
等高布局有几种不同的方法，但目前为止我认为浏览器兼容最好最简便的应该是padding补偿法。首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding-bottom的正值相抵消的负值，父容器设置超出隐藏，这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。