版權(quán)聲明：MB5U.com原創(chuàng)，未經(jīng)本站同意，嚴(yán)禁轉(zhuǎn)載！

　　今天在群里，有一位網(wǎng)友在用DIV CSS實(shí)現(xiàn)三列式布局的時(shí)候碰到了困難，向網(wǎng)友求助。這一類上部形象及導(dǎo)航，底部為版權(quán)，中間區(qū)域分為三列的布局方式越來越廣泛的應(yīng)用。17英寸的顯示器已經(jīng)成為主流，我們以800*600分辨率作為網(wǎng)頁的尺寸在某些時(shí)候已經(jīng)不合時(shí)宜了，越來越多的客戶及我們自身，要求我們制作的時(shí)候適應(yīng)1024*768分辨率。寬度增加了，我們的內(nèi)容區(qū)域劃分也產(chǎn)生了一些變化，因而三列式布局的應(yīng)用也越來越多了。我們今天來說說用DIV CSS三列式布局的實(shí)現(xiàn)方法。

　　首先我們構(gòu)勒一個(gè)草圖，理清一下思路。在實(shí)際操作中，你面對(duì)的可能不是草圖，而是美工設(shè)計(jì)人員所設(shè)計(jì)的網(wǎng)站效果圖，但大體上的結(jié)構(gòu)是相當(dāng)?shù)模�我們看下面的圖片：


　　這樣的結(jié)構(gòu)與兩列式的布局是非常類似的，區(qū)別就是多了一列。（好象是廢話，別扔臭雞蛋！）我們將頂部和底部設(shè)置為寬度1002px左右，并居中對(duì)齊，以適應(yīng)更大分辨率的需要。（現(xiàn)在1600*1200也算是正常分辨率之一吧）將中部的三列，即左側(cè)，主內(nèi)容區(qū)，右側(cè)。置于一個(gè)div容器中，并將此div設(shè)置為寬度1002px左右，并居中對(duì)齊。再將此容器內(nèi)的左側(cè)，主內(nèi)容區(qū)，右側(cè)分別設(shè)置寬度、應(yīng)用浮動(dòng)，以達(dá)到我們想預(yù)想的CSS布局效果。看下面的圖片：


　　我們根據(jù)上面的圖片，整理出各個(gè)div的id以及他們的關(guān)系：


他們的嵌套關(guān)系如下圖：


　　我們整理出HTML代碼：


　　我們開始編寫CSS進(jìn)行布局：


　　整體局布聲明：消除邊距，設(shè)置文字大小。
　　假如不消除body的邊距，在IE等瀏覽器中，內(nèi)容不是從左上端的0 0開始的。


　　頂部：寬度高度設(shè)置，水平居中對(duì)齊，背景色為#06f；
　　中部三列的容器：寬度設(shè)置，水平居中對(duì)齊，背景色為白色；
　　底部：寬度高度設(shè)置，水平居中對(duì)齊，背景色為#999。


　　左側(cè)（sider_a）：寬度設(shè)置，向左浮動(dòng)，背景色為#f93；
　　主內(nèi)容區(qū)（main）：寬度設(shè)置，向左浮動(dòng)，左邊距為6px，背景色為#dceafc；
　　右側(cè)（sider_b）：寬度設(shè)置，向右浮動(dòng)，背景色為#ccc；
　　為什么主內(nèi)容區(qū)左邊距為6px呢？我們是這樣計(jì)算的：
　　　　1002-220-580-190=12px
　　　　12/2=6px; 實(shí)現(xiàn)中間兩條空白分割線相等，均為6px。

　　寫到這里，我們布局應(yīng)該算是完成了，且慢，讓我們看看IE與FF這兩個(gè)讓我們抓狂的東東中，顯示效果是不是一樣。


　　在IE環(huán)境中，一切正常，沒有任何問題了。但在FF中footer和我們玩起了捉迷藏，跑到上面去了。我們?cè)谇懊娴奈恼隆禖SS布局教程：用DIV CSS實(shí)現(xiàn)國(guó)內(nèi)經(jīng)典式三行兩列布局》http://www.zhaotila.cn/article.asp?id=518 曾經(jīng)出現(xiàn)過樣的現(xiàn)象，是由于未清除浮動(dòng)而引發(fā)的后果，關(guān)于清除浮動(dòng)的知識(shí)，可以參考這里：http://www.zhaotila.cn/css/c_clear.html 我們?cè)赿ivall容器的最下面清除一下浮動(dòng)就可以了。如代碼：<br style="clear:both;" />。

　　我們進(jìn)行了一些修飾，填充一些內(nèi)容。最終效果：>>>查看最終的網(wǎng)頁效果<<<

版權(quán)聲明：MB5U.com原創(chuàng)，未經(jīng)本站同意，嚴(yán)禁轉(zhuǎn)載！