2020-04-20 CSS多列等高（利用padding-bot

作者: 追寻1989 | 来源:发表于2020-04-20 17:05 被阅读0次

2020-04-20 CSS多列等高（利用padding-bot
CSS 3列（等高文本列）
多列等高布局
多列等高布局
多列等高实现
2021-09-01-🌈 css flex 多列等高
高效-2多列等高
jQuery设置多列等高
页面架构
利用css创建多列文本布局

浏览器兼容最好最简便的应该是 padding补偿法。

首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值，父容器设置超出隐藏.

这个布局技巧的原理是：我们设置每一列的padding-bottom足够大（根据盒模型，背景色存在于padding上），但这撑大了外层容器的高度，接着我们通过设置列的margin-bottom为负值（绝对值与padding-bottom相等），并且外层容器的overflow为hidden，使容器高度回到原有值，它截断了每一列，这看起来就是我们想要的效果。

这样子父容器的高度就还是它里面的列没有设定padding-bottom时的高度，当它里面的任一列高度增加了，则父容器的高度被撑到它里面最高那列的高度，其他比这列矮的列则会用它们的padding-bottom来补偿这部分高度差。因为背景是可以用在padding占用的空间里的，而且边框也是跟随padding变化的，所以就成功的完成了一个障眼法。

没有等高布局：

代码：注释部分加上为等高

<!DOCTYPE html>
<html>
<head>
    <title>CSS多列等高布局</title>
    <style type="text/css">
        *{
            padding: 0px;
            margin: 0px;
        }
        .container{
            margin: 0 auto;
            width: 500px;
        /*  overflow: hidden;*/
        }
            .left{
            background-color: #f0f0db;
            float: left;
            width: 30%;
        /*  padding-bottom: 2000px;
            margin-bottom: -2000px;*/
        }
        .right{
            background-color: #f0c0c0;
            float: left;
            width: 70%;
            /*padding-bottom: 2000px;
            margin-bottom: -2000px;*/
        }
    </style>
</head>
<body>
    <div class="left">This is 30% left.</div>
    <div class="right">This is 70% right.<br><br><br><br>higher</div>
 
</body>
</html>