等高布局的使用場景有很多,很多時候為了滿足某列的背景或者邊框跟外框高度一樣,并且不受其他列動態變化高度的影響。一般我會考慮幾種方式:
一、負margin實現
代碼如下 | 復制代碼 |
.row-wrap { overflow: hidden; } .row1, .row2, .row3 { padding: 10px; margin-bottom: -1000px; padding-bottom: 1000px; } .row1{ width: 120px; background: #F2F2F2; float: left; } .row2{ width: 300px; background: #81C0F2; color: #FFF; float: left; _margin-right: -6px; //fix ie6 } .row3{ width: 150px; background: #FF6600; color: #FFF; overflow: hidden; zoom: 1; //觸發haslayout } <div class="row-wrap"> <div class="row1"> <p>悉尼洲際...</p> </div> <div class="row2"> <p>酒店離悉尼海濱...</p> </div> <div class="row3"> <p>在砂巖商場...</p> </div> </div> |