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

發(fā)布時(shí)間：2009-08-29 19:23:53 作者：佚名

CSS網(wǎng)頁(yè)布局實(shí)例:三欄等高布局.

首先，三欄等高布局，顧名思義，可以概括為以下特征：
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)重決定的吧，但是視覺(jué)上，我們待會(huì)兒會(huì)把它放到中間。

思考一下：這三列怎么可能在沒(méi)有寫(xiě)死高度的時(shí)候還智能的齊頭并進(jìn)呢？
其實(shí)不寫(xiě)死高度的確不能辦到智能的齊頭并進(jìn)，那怎么寫(xiě)死高等呢，答案就是，利用盒模型，寫(xiě)它的padding，這是一種方法，但挺奏效，就好比一個(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)該是巨人癥吧，沒(méi)關(guān)系，我們可以用margin-bottom的負(fù)值去隱藏它，這個(gè)技巧，在我看來(lái)，我真的解釋不清楚，有句古話：意會(huì)，言傳！你只要試試看，就會(huì)領(lǐng)會(huì)到其中的奧妙。下邊這幅圖對(duì)你的理解應(yīng)該有幫助：

到了這步，你會(huì)發(fā)現(xiàn)這3列的盒模型為32767px，此時(shí)你要在父元素上加：overflow: hidden;當(dāng)然IE6.0是：zoom:1;

#container  {
    background-image: url('bg.gif');
    width: 960px;
    margin: 0 auto;
    overflow: hidden;
}

Step4:
現(xiàn)在#main的視覺(jué)效果是在最左欄，我們要想辦法把它搞成中間
思路：先把#main排到中間，我們可以#main{margin-left:300},這時(shí)，#left被擠到800px的位置，在#left{margin-left:-800px;}就能搞定，可惜啊，IE6，實(shí)在是無(wú)語(yǔ)，只得重新思考了。

一般的，在css做布局時(shí)，有幾種思路，一種是float,一種是定位，關(guān)于定位的話，不熟悉的google一下就行，提一下：position: relative;的這個(gè)屬性，如果不指明top,left的話，它的視覺(jué)效果不會(huì)改變。
所以，為了讓#main在視覺(jué)效果上有所突破，那么必須指明top或者left，在這里只需要指明left就行了,

#main {
    float: left;
    background-color: #e5e5e5;
    width: 500px;
    left: 300px;
}
#left {
    float: left;
    background-color: #7bd;
    width: 300px;
    left: -500px;
}

其實(shí)在這中間，還有一個(gè)概念是比較重要的，#main，#left有了position:relative以后，就有了層的概念，所以當(dāng)#main{left:300px}后，#left已經(jīng)出來(lái)了，不會(huì)被擠到800px的位置了，故：之需要left:-500px就能達(dá)到左邊，500是#main的寬。
最后考慮的是向下兼容，
提供一段代碼：

雖然寫(xiě)了這么多，但是你能夠做，并不代表你應(yīng)該這么做，這是一個(gè)戰(zhàn)術(shù)和戰(zhàn)略的問(wèn)題，以下是我個(gè)人想知道的：
我覺(jué)得一開(kāi)始：

padding-bottom: 32767px;
margin-bottom: -32767px;

這么大的值，在reflow階段會(huì)不會(huì)很耗資源，而采用js來(lái)控制他們的高度，會(huì)不會(huì)來(lái)得更輕松一些呢？

第一次寫(xiě)這種東東，感到很棘手，不管是構(gòu)思上還是在語(yǔ)言表達(dá)上都還是很晦澀的，希望大家積極的指正，希望能和更多的朋友來(lái)進(jìn)行交流，一方面是提高自己，另一方面是促進(jìn)社區(qū)的和諧和共享，盡一份自己微薄的力量。