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>
