CSS 三欄等高布局實(shí)現(xiàn)方法

2024-07-11 08:27:23

字體：大中小

供稿：網(wǎng)友

首先，三欄等高布局，顧名思義，可以概括為以下特征：
1、3列（白癡也知道）
2、這3列高等相等
3、這3列的高度不是固定不變，而是隨著內(nèi)容的變化而變化

Step 1:
xhtml代碼：

<div id="header">#header</div>
<div id="container">
    <div id="main" class="column">#main</div>
    <div id="left" class="column">#left</div>
    <div id="right" class="column">#right</div>
</div>
<div id="footer">#footer</div>

主要結(jié)構(gòu)式#container的div，至于#header和#footer，完全是為了讓它能夠更像網(wǎng)頁(yè)一些，回到#container，它內(nèi)部包含三列，其中main里包含的是一個(gè)網(wǎng)頁(yè)最核心，最主要的內(nèi)容，所以我們不能怠慢，在純xhtml的流文檔中，瀏覽器是從上到下解析的，故重要的內(nèi)容應(yīng)該放在比較靠前的位置，這是由搜索引擎的權(quán)重決定的吧，但是視覺上，我們待會(huì)兒會(huì)把它放到中間。

思考一下：這三列怎么可能在沒有寫死高度的時(shí)候還智能的齊頭并進(jìn)呢？
其實(shí)不寫死高度的確不能辦到智能的齊頭并進(jìn)，那怎么寫死高等呢，答案就是，利用盒模型，寫它的padding，這是一種變態(tài)的方法，但挺奏效，就好比一個(gè)人只有實(shí)際只有170cm,但是算上20cm的頭發(fā)，天啊，他已經(jīng)是190cm了，還是先給出解決方法吧：就是利用padding-bottom和margin-bottom;

Step2:

#container {
    background-image: url('bg.gif');
    width: 960px;
    margin: 0 auto;
}
#main{float: left: width: 500px;background-color: #e5e5e5;}
#left{float: left: width: 300px;background-color: #7bd;}
#right{float: right: width: 160px;background-color: #f63;}

Step3:

#container .column{
padding-bottom: 32767px;
margin-bottom: -32767px;
}

這一步應(yīng)該算是本主題的核心，至于32767 這個(gè)數(shù)你可以理解成“足夠大”，以便于有足夠的空間去擴(kuò)展它的盒子，這么高應(yīng)該是巨人癥吧，沒關(guān)系，我們可以用margin-bottom的負(fù)值去隱藏它，這個(gè)技巧，在我看來(lái)，我真的解釋不清楚，有句古話：意會(huì)，言傳！你只要試試看，就會(huì)領(lǐng)會(huì)到其中的奧妙。下邊這幅圖對(duì)你的理解應(yīng)該有幫助：