一个等高布局的小实例

代码如下：

<!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变化的，所以就成功的完成了一个障眼法。

posted @ 2015-03-25 10:47  波克比520  阅读(192)  评论(0)  编辑  收藏  举报