兩個同級div等高布局

顯示效果：

  

css代碼如下

.wrap{
    overflow:hidden;
}
.left{
    width:30%;
    background:#09C;
}
.right{
    width:70%;
    background:#C6C;
}
.left, .right{
    float:left;
    word-break:break-all;
    padding-bottom:2050px;
    margin-bottom:-2000px;
}

 

div布局代碼如下

<div class="wrap">
        <div class="left">left----left----left----left----left----</div>
        <div class="right">right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----right----</div>
    </div>

 

原理講解：

在這里，我們設置了較大的padding-bottom值2000px，讓元素變得很高，但實際上當left和right類容不同的時候，其實他們兩的高度是不一樣的，這時候設置他們父級wrap的overflow:hidden屬性，並對元素設置margin-bottom:-2000px,可以讓元素下面2000像素被隱藏了，剩下的減少2000像素的上面部分顯示着，看起來，就是一樣高的了。

 

完！