什麼是多列等高佈局?
經常會有這樣的需求,一個父容器中,存在多列子容器,這些子容器的高度是不固定的,正常情況下,父容器的高度會隨着其子容器最高的那個容器的高度而變化伸縮,但其它子容器的高度並不會變化,導致如下結果
顯然,這並不是我們想要的,我們需要左側和右側的高度共同變化,這時,就可以使用margin-bottom負邊距實現
padding補償法
首先,給子容器設置padding-bottom值,一個足夠大的值,然後,再設置其margin-bottom等於負的padding-bottom的值,相互抵消,父容器設置overflow:hidden,這樣,任意一個子容器的高度增加,會把父容器撐開到最高那列的高度,其它比這列矮的子容器會通過padding-bottom來補償這部分的高度差,因爲背景和邊框都是隨着padding變化的,所以該方案可以實現一個障眼法,當然,注意根據業務需求設置一個足夠大的值
參考代碼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0; padding: 0;}
.box-1{width: 600px; border: 1px solid red; margin-top: 100px; margin-left: 100px; overflow: hidden;}
.box-1 .box-1-left{width: 25%; float: left; background-color: blue; padding-bottom: 300px; margin-bottom: -300px;}
.box-1 .box-1-right{width: 75%; float: right; background-color: green; padding-bottom: 300px; margin-bottom: -300px;}
</style>
</head>
<body>
<div class="box-1">
<div class="box-1-left">
kkkkkkkkk
</div><!--box-1-left-->
<div class="box-1-right">
kkkkkkkkkkkk<br><br><br>kkkkkkkkkkkkk<br><br><br><br><br><br>kkkkkkkkkkk
</div><!--box-1-right-->
</div><!--box-1-->
</body>
</html>