2020-04-20 CSS多列等高（利用padding-bot
2020-04-20 本文已影响0人
追寻1989
浏览器兼容最好最简便的应该是 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>
