DIV CSS 佈局教程網

新的表現層代碼，新增的容器都是浮動元素！

所有元素左浮動，將容器寬度設為100%，使他們占滿頁面的寬度。背景色從內容 div 移除並加至容器上。注，原文是所有容器的寬都設為100%，其實根本沒有這樣的必須，因為在浮動嵌套中，外面的容器必須會被撐大能容得下內部子元素的大小！

#container3 {  
    float:left;  
    width:100%;  
    background:green;  
}  
#container2 {  
    float:left;  
    width:100%;  
    background:yellow;  
}  
#container1 {  
    float:left;  
    width:100%;  
    background:red;  
}  
#col1 {  
    float:left;  
    width:30%;  
}  
#col2 {  
    float:left;  
    width:40%;  
}  
#col3 {  
    float:left;  
    width:30%;  
} 

現在是所有容器都完美地累在一起，只顯示一種背景顏色，我們必須讓其他背景也顯示出來。為此我們就得利用相對定位來讓這些容器像階梯一樣放置。這個本可以使用負邊界技術，但該死的IE5.5的盒子模型與W3C的不一致，為了兼容我們就得使用到CSS hack。由於本文聲明是不使用CSS hack，因此放棄。首先讓#container2向右移到30%,由於#container2裝著#container1，而#container1上裝著那三個列，這樣一來，最右邊的列就被移出游覽器的右邊了。而最外圍最底層的容器#container3則露出來了，露了左邊的30%。然後我們再移動最上層的容器#container1，向右邊移動40%，於是原來蓋住的第二層容器也露出來了，露出其左邊的40%,而#container1則只剩下100%-30%-40%=30%;上方的列也只剩下最右邊的列，卻表現為位於最左邊。這樣，背景也顯示正常了！

對應的表現層代碼

#container3 {  
    float:left;  
    width:100%;  
    background:green;  
}  
#container2 {  
    float:left;  
    width:100%;  
    background:yellow;  
    position:relative;  
    right:30%;  
}  
#container1 {  
    float:left;  
    width:100%;  
    background:red;  
    position:relative;  
    right:40%;  
}  
#col1 {  
    float:left;  
    width:30%;  
}  
#col2 {  
    float:left;  
    width:40%;  
}  
#col3 {  
    float:left;  
    width:30%;  
} 

由於最上層的那三列都是被整體往右往到(頁面的)70%，我們再把它們都往左移回70%就是！最後，由於我們前兩個背景容器都是被向右移動，移出了游覽器，它們都與游覽器的右邊連在一起，我們可以設置最底層的背景容器的overflow來隱藏那些被移出的部分。

#container3 {  
    float:left;  
    width:100%;  
    background:green;  
    overflow:hidden;  
    position:relative;  
}  
#container2 {  
    float:left;  
    width:100%;  
    background:yellow;  
    position:relative;  
    right:30%;  
}  
#container1 {  
    float:left;  
    width:100%;  
    background:red;  
    position:relative;  
    right:40%;  
}  
#col1 {  
    float:left;  
    width:30%;  
    position:relative;  
    left:70%;  
}  
#col2 {  
    float:left;  
    width:40%;  
    position:relative;  
    left:70%;  
}  
#col3 {  
    float:left;  
    width:30%;  
    position:relative;  
    left:70%;  
} 

最後，我們對列增加補白，讓每列顯得大方一些，而不是密密麻麻地塞滿一列。但是如果我們增加補白，可能有一些游覽器的有病又犯了，在IE6和更低版本的IE中，其怪異的盒子模型，會產生一些我們不願看到的結果。如，一個 200px 寬 20px 補白的 box 在 IE 中被視為 200px 寬，在其他浏覽器中則為正確的 240px。補白應該加在元素的寬度上。

不過放心，我們可以用完全不依賴於 padding 的方法來解決這個問題。相反，我們把列弄窄一點（列寬減去兩側的補白），之後用相對定位把它們移至正確的位置。例如，我們用了 2% 的補白，則 30% 的列將減至 26%，40% 的列減至 36%。用相對定位移回列時需謹記，現在列變窄了，所以當它們一起像最初那樣左浮動時，每一個需要比上一個移動更遠的距離。

完整的CSS

為了使布局保持在小寬度我在每個內容列增加了overflow:hidden; 這將切去超出列寬的東東，並阻止其干擾其他布局。重申一下，這只是 IE 的問題，其他所有浏覽器會保持正確的布局，不管列內是蝦米。如果你真想這樣做，可以用 IE 條件注釋只對 IE 寫規則。

#container3 {  
    float:left;  
    width:100%;  
    background:green;  
    overflow:hidden;  
    position:relative;  
}  
#container2 {  
    float:left;  
    width:100%;  
    background:yellow;  
    position:relative;  
    right:30%;  
}  
#container1 {  
    float:left;  
    width:100%;  
    background:red;  
    position:relative;  
    right:40%;  
}  
#col1 {  
    float:left;  
    width:26%;  
    position:relative;  
    left:72%;  
    overflow:hidden;  
}  
#col2 {  
    float:left;  
    width:36%;  
    position:relative;  
    left:76%;  
    overflow:hidden;  
}  
#col3 {  
    float:left;  
    width:26%;  
    position:relative;  
    left:80%;  
    overflow:hidden;  
}