十(shí)天學(xué)會(huì)web標(biāo)準DIV+CSS 二列(liè)和(hé)三列(liè)布(bù)局，將涉(shè)及到以下內容和知(zhī)識點
一，二列自適應寬度 二，二列固定寬度 三，二列固定寬度居中 四，xHTML的塊級元素(div)和內聯元素(span) 五，float屬性 六，三列自適應寬度 七，三列固定寬度 八，三列固定寬度居中 九，IE6的3像素bug
一，兩(liǎng)列(liè)自(zì)適應(yīng)寬度(dù)
下(xià)麵(miàn)以(yǐ)常見(jiàn)的(dí)左(zuǒ)列(liè)固定右(yòu)列自適(shì)應(yīng)為例，因為div為(wéi)塊狀元素(sù)，默認情(qíng)況(kuàng)下占據一(yī)行(háng)的空間(jiān)，要想讓下麵(miàn)的(dí)div跑(pǎo)到(dào)右(yòu)側，就(jiù)需要做助(zhù)css的(dí)浮(fú)動來(lái)實現。首(shǒu)先創建html代(dài)碼如下(xià)：
<div id="side">此處(chǔ)顯示 id "side" 的(dí)內(nèi)容</div>
<div id="main">此(cǐ)處顯示 id "main" 的(dí)內容</div>
按照(zhào)如(rú)圖所示的創(chuàng)建方法，把(bǎ)兩個(gè)div都(dū)創建出來，或手工(gōng)寫出(chū)代碼(mǎ)。div創建(jiàn)完成後(hòu)，開始創(chuàng)建(jiàn)css樣(yàng)式(shì)表，代碼(mǎ)如下：
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
先創(chuàng)建#side的樣(yàng)式(shì)，為了便(biàn)於(yú)查看，設置了(liǎo)背(bèi)景(jǐng)色(sè)。注(zhù)意，side的(dí)浮(fú)動設置(zhì)為(wéi)向(xiàng)左浮動(dòng)；
然(rán)後(hòu)創(chuàng)建#main樣(yàng)式，注(zhù)意這裏(lǐ)設置#main的(dí)左(zuǒ)邊距為120px。預覽結果(guǒ)如下：
當我(wǒ)們(mén)拖(tuō)動(dòng)瀏覽器窗口變大變(biàn)小(xiǎo)時(shí)，#main的寬度也會跟(gēn)著(zhuó)改變。這裏(lǐ)設置margin-left:120px;正好讓(ràng)出(chū)#side占(zhān)去的120px寬(kuān)度(dù)，如(rú)果(guǒ)這裏設(shè)置(zhì)為(wéi)122px的話，中(zhōng)間將出(chū)現2px的(dí)空隙，大家可(kě)以試一下(xià)。
代(dài)碼原文(wén)：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 70%; margin-left: 120px; }
</style>
</head>
<body>
<div id="side">此處顯示 id "side" 的內(nèi)容(róng)</div>
<div id="main">此(cǐ)處(chǔ)顯示(shì) id "main" 的(dí)內(nèi)容</div>
</body>
</html>
二，兩(liǎng)列固定寬(kuān)度
有(yǒu)了前麵的基礎，兩列固定固(gù)定(dìng)寬(kuān)度就容易(yì)多了(liǎo)，隻需要把#main的(dí)寬(kuān)度(dù)由百分比改為(wéi)固定值，如下(xià)圖：
三，兩(liǎng)列(liè)固定寬度居(jū)中
兩(liǎng)列固(gù)定寬度(dù)居中(zhōng)，需要在(zài)兩列固定寬度的(dí)基(jī)礎(chǔ)上(shàng)改進，在學一列固(gù)定(dìng)寬度(dù)居中時(shí)，我們知(zhī)道讓(ràng)它居(jū)中的(dí)方法(fǎ)，所以這裏(lǐ)需(xū)要(yào)在(zài)這(zhè)兩個div之(zhī)外再(zài)加(jiā)一(yī)個父(fù)div：
<div id="content">
<div id="side">此(cǐ)處(chǔ)顯示 id "side" 的內(nèi)容</div>
<div id="main">此處顯(xiǎn)示(shì) id "main" 的內(nèi)容</div>
</div>
操作(zuò)方法：在(zài)源代碼(mǎ)裏選中這兩個div的代(dài)碼(mǎ)後，點擊工(gōng)具欄上插(chā)入div按鈕(niǔ)，填(tián)寫id後確定(dìng)，得到如上的(dí)代(dài)碼(mǎ)
下麵就(jiù)需要(yào)設置#content的樣(yàng)式了，我們知(zhī)道，#side的(dí)寬(kuān)度為120px，#main寬度(dù)為350px，那(nà)麼(mó)#content的(dí)寬(kuān)度(dù)應該為這兩者(zhě)之(zhī)和，然(rán)後(hòu)設置#content居(jū)中，那(nà)麼(mó)整體就居(jū)中了(liǎo)：
代碼原文：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#main { background: #99FFFF; height: 300px; width: 350px; margin-left: 120px; }
</style>
</head>
<body>
<div id="content">
<div id="side">此(cǐ)處顯(xiǎn)示 id "side" 的內(nèi)容(róng)</div>
<div id="main">此處顯(xiǎn)示 id "main" 的內(nèi)容</div>
</div>
</body>
</html>
四，xhtml的(dí)塊級元(yuán)素(div)和(hé)內聯元(yuán)素(sù)(span)
塊(kuài)級元(yuán)素(sù)：就(jiù)是一(yī)個方塊，像(xiàng)段落(là)一(yī)樣，默(mò)認占(zhān)據(jù)一行出現；
內(nèi)聯(lián)元素：又叫(jiào)行內元素，顧名(míng)思義，隻(zhī)能放在行內(nèi)，就像(xiàng)一個單詞，不會造成前(qián)後換行(háng)，起(qǐ)輔助(zhù)作用。
一(yī)般(bān)的塊級元素諸如(rú)段落<p>，標題(tí)<h1><h2>...，列表,<ul><ol><li> ，表格<table>，表單(dān)<form>，DIV<div>和(hé)BODY<body>等(děng)元素。而內(nèi)聯元素(sù)則如: 表單(dān)元(yuán)素<input>，超(chāo)級(jí)鏈接<a>，圖像(xiàng)<img>，<span> ........ 塊(kuài)級(jí)無素(sù)的(dí)顯(xiǎn)著特(tè)點是：每個(gè)塊(kuài)級(jí)元(yuán)素(sù)都是從一(yī)個新行開(kāi)始(shǐ)顯(xiǎn)示(shì)，而且其(qí)後(hòu)的無(wú)素也(yě)需另(lìng)起一行進行(háng)顯(xiǎn)示。
從上(shàng)圖的(dí)例子(zǐ)可以看出(chū)，塊級元素默認占(zhān)據(jù)一行，相(xiāng)當(dāng)於在它(tā)之前和之(zhī)後各插(chā)入(rù)了(liǎo)一個換行；而(ér)內聯元素span沒對(duì)顯(xiǎn)示(shì)效果造成(chéng)任(rèn)何(hé)影(yǐng)響(xiǎng)，事實也是(shì)如(rú)此；em隻是(shì)讓(ràng)字(zì)體變成(chéng)了斜體(tǐ)，也沒有單獨占據(jù)一行。這(zhè)就是(shì)塊(kuài)級元素和(hé)內聯元素(sù)，正因(yīn)為有(yǒu)了(liǎo)這些元素(sù)，才使我(wǒ)們的網頁變得(dé)豐(fēng)富多(duō)彩。
如果沒有(yǒu)css的(dí)作用，塊元(yuán)素會順序以(yǐ)每次另(lìng)起一行的(dí)方(fāng)式一直(zhí)往(wǎng)下(xià)排(pái)。而(ér)有了css以後，我(wǒ)們可以改(gǎi)變(biàn)這(zhè)種html的(dí)默認布(bù)局模式，把(bǎ)塊元(yuán)素擺放(fàng)到你(nǐ)想(xiǎng)要(yào)的位(wèi)置上去。而不(bù)是每次都(dū)愚蠢的(dí)另(lìng)起(qǐ)一(yī)行(háng)。也就是(shì)說，可(kě)以用(yòng)css的(dí)display:inline將塊(kuài)級元素改變為(wéi)內聯元素，也可以用display:block將內(nèi)聯(lián)元素改變為(wéi)塊元(yuán)素(sù)。
五，float屬(shǔ)性
回(huí)到(dào)我(wǒ)們(mén)的例(lì)子當(dāng)中(zhōng)，理(lǐ)解了塊級(jí)元(yuán)素(sù)和內(nèi)聯(lián)元(yuán)素，對理(lǐ)解浮(fú)動就容易(yì)多(duō)了。float是(shì)個重點，希望(wàng)大家(jiā)都能理解(jiě)。上例中用(yòng)float讓(ràng)元素向左(zuǒ)浮動，在(zài) CSS 中(zhōng)，任何(hé)元素都可以浮(fú)動。浮動(dòng)元素會(huì)生(shēng)成一個(gè)塊(kuài)級框(kuàng)，而(ér)不論它(tā)本(běn)身(shēn)是(shì)何(hé)種元(yuán)素；且要指(zhǐ)明一個(gè)寬(kuān)度，否則(zé)它會盡(jìn)可能地(dì)窄(zhǎi)；另外(wài)當可供(gōng)浮(fú)動的空間小於(yú)浮(fú)動(dòng)元(yuán)素時(shí)，它會(huì)跑(pǎo)到(dào)下(xià)一行，直到(dào)擁有(yǒu)足夠(gòu)放下(xià)它的空(kōng)間。
想必大(dà)家都(dū)用過(guò)word排(pái)過版(bǎn)，當中有個(gè)圖(tú)文混排(pái)功能(néng)，如(rú)下(xià)圖(tú)：
這(zhè)個功能非常類(lèi)似於css中的浮(fú)動，下麵(miàn)我(wǒ)們用(yòng)css來實現(xiàn)這一(yī)功(gōng)能(néng)：
<div id="side"><img src="http://www.100181.com/uploadfile/2014/0901/212165039036721.gif" width="192" height="142" /></div>
<div id="main"> 標準之(zhī)路(lù)提供DIV+CSS教程,DIV+CSS視(shì)頻(pín)教程,web2.0標(biāo)準,DIV+CSS布(bù)局(jú)入(rù)門教程,網(wǎng)頁布局實(shí)例,css布局實(shí)例,div+css模(mó)板,div+css實例解析(xī),網(wǎng)站重構(gòu)，網頁代(dài)碼,水晶(jīng)圖標,幻(huàn)燈廣(guǎng)告圖片.教程適合(hé)初學者循序(xù)漸進學習(xí)!</div>
創建完(wán)以(yǐ)上(shàng)代碼後，在(zài)瀏覽(lǎn)器(qì)中預(yù)覽(lǎn)會(huì)顯(xiǎn)示(shì)如下結果：
下麵用css讓(ràng)side浮(fú)動，再(zài)看看(kàn)效(xiào)果
body { font-size:18px; line-height:200%; }
#side { float:left;}
大家(jiā)看看(kàn)，是不是(shì)和(hé)word的效果已(yǐ)經(jīng)很像(xiàng)相(xiāng)了，但這裏的文(wén)字和(hé)圖片(piàn)右(yòu)側貼(tiē)的很(hěn)近，怎麼辦呢？剛才已(yǐ)經(jīng)說(shuō)了，當(dāng)元(yuán)素浮動過之後，需要(yào)指定一個寬度，否則它(tā)會(huì)盡可能(néng)窄。那(nà)麼(mó)把side的寬(kuān)度(dù)設置為大於圖(tú)片的(dí)寬(kuān)度(dù)，它們(mén)中間(jiān)應該就有(yǒu)空隙了(liǎo)。圖(tú)片的寬度是192px，設置side為202px，中(zhōng)間將會(huì)有(yǒu)10px的空隙了。
body { font-size:18px; line-height:200%; }
#side { float:left; width:202px;}
細心(xīn)的朋(péng)友已經(jīng)發(fā)現，上例(lì)中#main的(dí)div還(huán)定(dìng)義(yì)了(liǎo)margin-left:120px;而(ér)這裏沒(méi)有定義(yì)，但它(tā)多出的(dí)文(wén)字(zì)卻跑到了圖(tú)片(piàn)(#side)的下(xià)方，是不是設(shè)置margin-left:後，它就不(bù)會(huì)跑到#side的(dí)正文(wén)呢？如果(guǒ)你能想到這(zhè)一點，你的(dí)確(què)是(shì)太聰(cōng)明(míng)了，事實確實是這樣(yàng)，在css樣(yàng)式(shì)表中加(jiā)上下麵一(yī)行
#main { margin-left:202px;}
這就是如何(hé)應(yīng)用(yòng)浮動(dòng)實現(xiàn)兩列布局的(dí)原(yuán)理。那(nà)麼三列呢？
六，三(sān)列自適應(yīng)寬度
三(sān)列自適(shì)應寬(kuān)度，一般常用的結構是(shì)左列(liè)和右(yòu)列固(gù)定(dìng)，中(zhōng)間列根據瀏覽(lǎn)器(qì)寬度自(zì)適應(yīng)。下(xià)麵在(zài)二列(liè)自適(shì)應寬度(dù)基(jī)礎(chǔ)上(shàng)修改一(yī)下
<div id="side">此(cǐ)處顯示 id "side" 的內(nèi)容</div>
<div id="side1">此(cǐ)處(chǔ)顯(xiǎn)示 id "side1" 的(dí)內容</div>
<div id="main">此處顯示 id "main" 的內(nèi)容(róng)</div>
增加以下(xià)css樣式：
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
把(bǎ)原(yuán)來(lái)#main樣式的(dí)width:70%去掉(diào)，然後設(shè)置左右外邊(biān)距(jù)各(gè)120px，讓出(chū)左右列的(dí)寬(kuān)度
#main { background: #99FFFF; height: 300px; margin:0 120px; }
預覽一(yī)下效果如(rú)下(xià)：
也許(xǔ)預覽(lǎn)出(chū)來(lái)的(dí)效果(guǒ)和我(wǒ)的不(bù)一樣(yàng)，別急(jí)，還有一項設(shè)置(zhì)，默認body是有外(wài)邊距(jù)的，所(suǒ)以這裏還得(dé)設置(zhì)body的外邊距為0；點擊(jī)css麵板上(shàng)的新(xīn)建按鈕，然後(hòu)在(zài)新建(jiàn)麵(miàn)板(bǎn)中選(xuǎn)擇：標簽（重定義(yì)標(biāo)簽外(wài)觀），然後選擇(zé)body，設置body的邊(biān)界為(wéi)0即(jí)可(kě)。
代碼(mǎ)原(yuán)文：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { margin:0;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id="side">此(cǐ)處顯(xiǎn)示 id "side" 的內容</div>
<div id="side1">此(cǐ)處顯(xiǎn)示 id "side1" 的(dí)內(nèi)容(róng)</div>
<div id="main">此處(chǔ)顯(xiǎn)示 id "main" 的內容(róng)</div>
</body>
</html>
七(qī)，三(sān)列固(gù)定寬度
三列(liè)固定寬度可以在三(sān)列(liè)自適(shì)應基(jī)礎(chǔ)上添加(jiā)一個(gè)父div，並設(shè)置這(zhè)個(gè)div的寬(kuān)度即(jí)可，如(rú)下，添加(jiā)一個(gè)id為content的(dí)父(fù)容(róng)器。
在源代碼(mǎ)裏選(xuǎn)中(zhōng)這(zhè)三個div，然後點擊工具欄上(shàng)的“插入(rù)div標(biāo)簽(qiān)”按鈕(niǔ)，這(zhè)時彈出(chū)的窗口插入(rù)項會默認(rèn)為：在(zài)選定(dìng)的內(nèi)容(róng)旁換(huàn)行，輸(shū)入id為(wéi)content，然後給這個div定(dìng)義個寬(kuān)度
三列固定(dìng)寬(kuān)度出(chū)來了(liǎo)，要想實現三列(liè)固定寬度(dù)居(jū)中(zhōng)就更方便(biàn)了，隻需設置#content {margin:0 auto;}即可
代(dài)碼原(yuán)文：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style>
body { margin:0;}
#content { width:470px; margin:0 auto;}
#side { background: #99FF99; height: 300px; width: 120px; float: left; }
#side1 { background: #99FF99; height: 300px; width: 120px; float: right; }
#main { background: #99FFFF; height: 300px; margin:0 120px; }
</style>
</head>
<body>
<div id="content">
<div id="side">此(cǐ)處顯示(shì) id "side" 的內容</div>
<div id="side1">此(cǐ)處顯示(shì) id "side1" 的內容</div>
<div id="main">此處(chǔ)顯示(shì) id "main" 的(dí)內容</div>
</div>
</body>
</html>
八(bā)，IE6的3像素bug
3像素bug是(shì)IE6的(dí)一個著名(míng)的bug，當(dāng)浮動(dòng)元素與非浮動元素(sù)相(xiāng)鄰時，這個(gè)3像素的Bug就(jiù)會(huì)出現。看下(xià)麵這個(gè)左列固(gù)定，右列(liè)液(yè)態的(dí)例子，css代(dài)碼(mǎ)如下：
body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px;}
#main { background: #99FFFF; height: 300px;}
html代碼如下(xià)：
<div id="side">此(cǐ)處顯示 id "side" 的內容(róng)</div>
<div id="main">此處(chǔ)顯示 id "main" 的內(nèi)容</div>
下(xià)麵看(kàn)看IE6和(hé)IE7中(zhōng)的顯示(shì)效(xiào)果(guǒ)：
從截(jié)圖中明顯看(kàn)出，IE6會在(zài)兩(liǎng)個(gè)div中間(jiān)加上(shàng)3px的空隙，那麼要解決這個問題，請(qǐng)在#side上加(jiā)上(shàng)_margin-right:-3px;記(jì)住，前邊加上一下劃(huá)綫，這(zhè)樣這(zhè)個(gè)樣式(shì)專門針對IE6生(shēng)效。IE7和FF下(xià)還會正常(cháng)顯示(shì)。
body { margin:0;}
#side { float: left; background:#99FF99; height: 300px; width: 120px; _margin-right:-3px;}
#main { background: #99FFFF; height: 300px; }
看看(kàn)，是不是問題(tí)已(yǐ)經解(jiě)決(jué)了(liǎo)。但它(tā)不能通過W3C驗(yàn)證(zhèng)。當(dāng)兩列(liè)固定(dìng)寬度(dù)時(shí)，最好(hǎo)把(bǎ)#main也(yě)固(gù)定寬(kuān)度且向右(yòu)浮動(dòng)，這樣(yàng)就(jiù)可以(yǐ)避免(miǎn)IE6的3像素(sù)bug了。
文章出處：標(biāo)準之路 編輯(jí)：楊雨晨思(sī)
轉載請(qǐng)保留原文(wén)地(dì)址: https://antelcom.cn/show-341.html