CSS多列等高（利用padding-bottom|margin-bottom正负值相抵）

忘是亡心i 2022-03-12 13:16 222阅读 0赞

**css多列等高 布局方案**

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

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

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

没有等高布局：

![20190306094442834.png][]

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

![20190306094403952.png][]

<!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>

[Link 1]: http://www.51xuediannao.com/tags.php?/%E5%85%BC%E5%AE%B9/
[20190306094442834.png]: /images/20220312/16e75a432bc94d079ca1bed773b15b79.png
[20190306094403952.png]: /images/20220312/a15efa979d1347a8aceed09469f0de85.png