版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/qq_27855219/article/details/88218760
css多列等高 布局方案
浏览器兼容最好最简便的应该是 padding补偿法。
首先把列的padding-bottom设为一个足够大的值，再把列的margin-bottom设一个与前面的padding- bottom的正值相抵消的负值，父容器设置超出隐藏.
这样子父容器的高度就还是它里面的列没有设定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>