我以爲兼容最好最簡便的是padding補償法。因此把它分享給你們。css
1.把列的padding-bottom設爲一個足夠大的值。code
2.把列的margin-bottom設一個與前面的padding-bottom的正值相抵消的負值,父容器設置超出隱藏,這樣子父容器的高度就仍是它裏面的列沒有設定padding-bottom時的高度,當它裏面的任一列高度增長了,則父容器的高度被撐到它裏面最高那列的高度,其餘比這列矮的列則會用它們的padding-bottom來補償這部分高度差。由於背景是能夠用在padding佔用的空間裏的,並且邊框也是跟隨padding變化的。class
HTML代碼:容器
<div class="wan"> <div class="box">大賽盛大上大學操做現場是啥看監控活動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打</div> <div class="box1">動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打動卡仍是打</div> </div>
css部分:監控
.box{ width: 200px; background: red; float: left; padding-bottom: 3000px; margin-bottom: -3000px; } .box1{ background: #00FFFF; margin-left: 200px; margin-bottom: -3000px; padding-bottom: 3000px; } .wan{ overflow: hidden; }