等高布局的使用場景有很多,很多時(shí)候?yàn)榱藵M足某列的背景或者邊框跟外框高度一樣,并且不受其他列動(dòng)態(tài)變化高度的影響。一般我會(huì)考慮幾種方式:
一、負(fù)margin實(shí)現(xiàn)
代碼如下 | 復(fù)制代碼 |
.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; //觸發(fā)haslayout } <div class="row-wrap"> <div class="row1"> <p>悉尼洲際...</p> </div> <div class="row2"> <p>酒店離悉尼海濱...</p> </div> <div class="row3"> <p>在砂巖商場...</p> </div> </div> |