為了讓網(wǎng)頁更美觀、協(xié)調(diào)，有的時(shí)候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實(shí)現(xiàn)的，現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實(shí)現(xiàn)的等高布局。
為了讓網(wǎng)頁更美觀、協(xié)調(diào)，有的時(shí)候需要用到左右等到布局，傳統(tǒng)的等高布局是用 javascript 實(shí)現(xiàn)的，現(xiàn)在來看看 silence 發(fā)明的真正的 CSS 實(shí)現(xiàn)的等高布局，其方法主要是采用“隱藏容器溢出”、“正內(nèi)補(bǔ)丁”和“負(fù)外補(bǔ)丁”結(jié)合的方法實(shí)現(xiàn)的。
下面來看看實(shí)際的例子（三列等高），以下面的 XHTML 代碼為例： <div id="wrap">
<div id="left">
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
<p>left</p>
</div>
<div id="center">
<p>center</p>
……（20個(gè)或更多個(gè)）
<p>center</p>
</div>
<div id="right">
<p>right</p>
<p>right</p>
<p>right</p>
</div>
</div>
CSS 代碼： *{
margin:0;
padding:0;
}
#wrap{
overflow:hidden;
width:1000px;
margin:0 auto;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
#left{
float:left;
width:250px;
background:#00FFFF;
}
#center{
float:left;
width:500px;
background:#FF0000;
}
#right{
float:right;
width:250px;
background:#00FF00;
}
從效果中可以看到，左右兩列雖然內(nèi)容少，但高度和內(nèi)容最多的中間列等高。其核心代碼（拿本例來說）是： #wrap{
overflow:hidden;
}
#left,#center,#right{
margin-bottom:-10000px;
padding-bottom:10000px;
}
其中的 10000px 可以修改為其他值，但不能小于最高列的高度。
經(jīng)測試，此方法兼容 IE6/IE7/IE8 beta 2/FF/Opera/Chrome 。
方法很簡單吧。從這里可以看出：看似簡單的 CSS,其實(shí)并不簡單。
======= 華麗的分割線（2009/02/18） ==================================
前兩天做網(wǎng)頁的時(shí)候運(yùn)用這樣方法發(fā)現(xiàn)一個(gè)問題：如果子列有邊框 border 屬性的話，下邊框不會(huì)將不顯示。因?yàn)樗麄兿旅孢€有很長一部分，都被隱藏了，看圖理解：

半透明部分都被隱藏了，所以看不到下邊框。

最新評(píng)論