等高布局的使用场景有很多,很多时候为了满足某列的背景或者边框跟外框高度一样,并且不受其他列动态变化高度的影响。一般我会考虑几种方式:
一、负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> |