margin-bottom負值實現多列等高佈局
阿新 • • 發佈:2019-02-11
什麼是多列等高佈局?
經常會有這樣的需求,一個父容器中,存在多列子容器,這些子容器的高度是不固定的,正常情況下,父容器的高度會隨著其子容器最高的那個容器的高度而變化伸縮,但其它子容器的高度並不會變化,導致如下結果
顯然,這並不是我們想要的,我們需要左側和右側的高度共同變化,這時,就可以使用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>