純CSS無(wú)hacks的跨游覽器自適應(yīng)高度多列布局 推薦
我要評(píng)論利用純CSS創(chuàng)建一個(gè)等高多列的布局并不件易事，本教程將著重分析出現(xiàn)在多列布局的多個(gè)問(wèn)題，然后為大家等來(lái)一個(gè)簡(jiǎn)單全游覽器通吃的解決方法，不使用圖片，腳本，CSS hacks并在最嚴(yán)格的XHTML 規(guī)范中都能通過(guò)驗(yàn)證。
問(wèn)題的癥結(jié)所在
如上圖所示，由于各列的內(nèi)容不一致導(dǎo)致其背景的高度也不統(tǒng)一。而背景實(shí)質(zhì)上是內(nèi)容（標(biāo)準(zhǔn)的盒子模型是由內(nèi)容區(qū)
對(duì)內(nèi)容與背景實(shí)行分離
解決等高問(wèn)題的第一步就是把它拆分為兩個(gè)較小的，可以單獨(dú)解決的部分。這樣，我們?cè)瓉?lái)是一列對(duì)應(yīng)一個(gè)DIV，現(xiàn)在是一列對(duì)應(yīng)一個(gè)DIV，一個(gè)用來(lái)裝載內(nèi)容，一個(gè)用來(lái)顯示背景。這種分離有利于我們對(duì)各個(gè)元素的掌控和把它們用另一種更有效的方式組合起來(lái)，這引起我很快會(huì)在下面的章節(jié)講述。
利用浮動(dòng)嵌套解決最高列的高度的問(wèn)題。
這是解決多列等高的關(guān)鍵。使一個(gè)DIV的高度等于最高列的高度的唯一方法就是讓這個(gè)DIV包含所有的列。換句話說(shuō)，通過(guò)把所有的列放在一個(gè)容器中，容器的高度就是最高列的高度。這是個(gè)非常有用的結(jié)構(gòu)。
單行三列的布局的結(jié)構(gòu)層代碼。
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
對(duì)應(yīng)的表現(xiàn)層代碼。
#container1 {
float:left;
width:100%;
}
#col1 {
float:left;
width:30%;
background:red;
}
#col2 {
float:left;
width:40%;
background:yellow;
}
#col3 {
float:left;
width:30%;
background:green;
}
增加用來(lái)顯示背景的容器
下一步是增加額外的容器，讓它們彼此嵌套，并讓所有外圍的容器數(shù)（新增的加上原來(lái)的那一個(gè)）等于列的總數(shù)：3。這三個(gè)容器用來(lái)顯示各列的背景。請(qǐng)注意，我們?nèi)サ袅嗽瓉?lái)各列的背景，把它們移至這些容器上。
新的結(jié)構(gòu)層代碼，讓新增的容器套在原來(lái)的外圍容器上！
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
新的表現(xiàn)層代碼，新增的容器都是浮動(dòng)元素！
所有元素左浮動(dòng)，將容器寬度設(shè)為100%，使他們占滿頁(yè)面的寬度。背景色從內(nèi)容 div 移除并加至容器上。注，原文是所有容器的寬都設(shè)為100%，其實(shí)根本沒(méi)有這樣的必須，因?yàn)樵诟?dòng)嵌套中，外面的容器必須會(huì)被撐大能容得下內(nèi)部子元素的大?。?
#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%;
}
用相對(duì)定位來(lái)移動(dòng)容器
現(xiàn)在是所有容器都完美地累在一起，只顯示一種背景顏色，我們必須讓其他背景也顯示出來(lái)。為此我們就得利用相對(duì)定位來(lái)讓這些容器像階梯一樣放置。這個(gè)本可以使用負(fù)邊界技術(shù)，但該死的IE5.5的盒子模型與W3C的不一致，為了兼容我們就得使用到CSS hack。由于本文聲明是不使用CSS hack，因此放棄。首先讓#container2向右移到30%,由于#container2裝著#container1，而#container1上裝著那三個(gè)列，這樣一來(lái)，最右邊的列就被移出游覽器的右邊了。而最外圍最底層的容器#container3則露出來(lái)了，露了左邊的30%。然后我們?cè)僖苿?dòng)最上層的容器#container1，向右邊移動(dòng)40%，于是原來(lái)蓋住的第二層容器也露出來(lái)了，露出其左邊的40%,而#container1則只剩下100%-30%-40%=30%;上方的列也只剩下最右邊的列，卻表現(xiàn)為位于最左邊。這樣，背景也顯示正常了！
對(duì)應(yīng)的表現(xiàn)層代碼
#container3 {
float:left;
/*width:100%;*/
/*沒(méi)有必要的代碼被注釋掉！*/
background:green;
}
#container2 {
float:left;
/*width:100%;*/
/*沒(méi)有必要的代碼被注釋掉！*/
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%;
}
把各列的內(nèi)容移回原來(lái)的位置上
由于最上層的那三列都是被整體往右往到(頁(yè)面的)70%，我們?cè)侔阉鼈兌纪笠苹?0%就是！最后，由于我們前兩個(gè)背景容器都是被向右移動(dòng)，移出了游覽器，它們都與游覽器的右邊連在一起，我們可以設(shè)置最底層的背景容器的overflow來(lái)隱藏那些被移出的部分。
#container3 {
float:left;
/*width:100%;*/
/*沒(méi)有必要的代碼被注釋掉！*/
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
/*width:100%;*/
/*沒(méi)有必要的代碼被注釋掉！*/
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%;
}
對(duì)列添加補(bǔ)白（內(nèi)邊距）
最后，我們對(duì)列增加補(bǔ)白，讓每列顯得大方一些，而不是密密麻麻地塞滿一列。但是如果我們?cè)黾友a(bǔ)白，可能有一些游覽器的有病又犯了，在IE6和更低版本的IE中，其怪異的盒子模型，會(huì)產(chǎn)生一些我們不愿看到的結(jié)果。如，一個(gè) 200px 寬 20px 補(bǔ)白的 box 在 IE 中被視為 200px 寬，在其他瀏覽器中則為正確的 240px。補(bǔ)白應(yīng)該加在元素的寬度上。
不過(guò)放心，我們可以用完全不依賴于 padding 的方法來(lái)解決這個(gè)問(wèn)題。相反，我們把列弄窄一點(diǎn)（列寬減去兩側(cè)的補(bǔ)白），之后用相對(duì)定位把它們移至正確的位置。例如，我們用了 2% 的補(bǔ)白，則 30% 的列將減至 26%，40% 的列減至 36%。用相對(duì)定位移回列時(shí)需謹(jǐn)記，現(xiàn)在列變窄了，所以當(dāng)它們一起像最初那樣左浮動(dòng)時(shí)，每一個(gè)需要比上一個(gè)移動(dòng)更遠(yuǎn)的距離。
完整的CSS
為了使布局保持在小寬度我在每個(gè)內(nèi)容列增加了overflow:hidden; 這將切去超出列寬的東東，并阻止其干擾其他布局。重申一下，這只是 IE 的問(wèn)題，其他所有瀏覽器會(huì)保持正確的布局，不管列內(nèi)是蝦米。如果你真想這樣做，可以用 IE 條件注釋只對(duì) IE 寫規(guī)則。
#container3 {
float:left;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
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;
}
提示：您可以先修改部分代碼再運(yùn)行
好了，文章就此結(jié)果，更多的例子可以參看原作者的網(wǎng)址，或點(diǎn)擊以下鏈接：2 列 ， 3 列， 4 列，以及 5 列。
相關(guān)文章
純Css實(shí)現(xiàn)Div高度根據(jù)自適應(yīng)寬度（百分比）調(diào)整
這篇文章主要介紹了純Css實(shí)現(xiàn)Div高度根據(jù)自適應(yīng)寬度（百分比）調(diào)整，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著2020-07-16css和css3彈性盒模型實(shí)現(xiàn)元素寬度（高度）自適應(yīng)
這篇文章主要介紹了css和css3彈性盒模型實(shí)現(xiàn)元素寬度（高度）自適應(yīng)的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋2019-05-15- 對(duì)象height:100%并不能直接產(chǎn)生效果，是因?yàn)楦涓笇?duì)象有關(guān)，下面有個(gè)示例為大家詳細(xì)介紹下，感興趣的朋友可以參考下2013-09-04
CSS min-height IE6、IE7、FF下DIV自適應(yīng)高度
IE6、IE7、FF下DIV自適應(yīng)高度2010-05-13css textarea 高度自適應(yīng),無(wú)滾動(dòng)條
用css控制textarea文本域的高度隨內(nèi)容的變化而變化,不出現(xiàn)滾動(dòng)條.2009-07-11CSS解決未知高度的垂直水平居中自適應(yīng)問(wèn)題
今天有人問(wèn)起，晚上試著寫出來(lái)，供參考； 以下代碼兼容主流瀏覽器IE6、IE7、Firefox、Opera。 從最簡(jiǎn)單的開(kāi)始………… 一、如何讓一個(gè)DIV水平居2009-04-04
CSS 實(shí)現(xiàn)高度自適應(yīng)鋪滿整屏的實(shí)現(xiàn)
這篇文章主要介紹了CSS 實(shí)現(xiàn)高度自適應(yīng)鋪滿整屏的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)2020-11-23