|
在我的前一篇教程《九宮格基本布局》中，我介紹了用相對定位加絕對定位的方法來制作九宮格的基本布局。這是一種比較符合人們慣性思維的方法，好像制作過程中一切都是順理成章的事情，然而因為IE6讓人惡心的奇偶性BUG，使得這種布局方法要想通用變得有點遙不可及，因為國內(nèi)大多數(shù)用戶還是用著IE6，我們不能因此而丟掉這部分用戶。
這個BUG目前是無藥可治，也沒有什么Hack技巧能運用，唯一能用的方式就是繞開它。也就是說我要定位這九宮格的四個角容器的位置，絕對定位的方法是不能采用的了，這不吝是一個重大的打擊，這將完全推翻我前一篇文章中用到的方法，我們只好另起爐灶了。
那么還有那些技術(shù)能夠拯救這個BUG于水深火熱之中呢？我們知道如果用左右浮動的方法能夠準(zhǔn)確地將元素對象發(fā)生偏移，并且這種方法也能避免IE6的奇偶性BUG。OK，我們就用它了。
布局的重點和難點
我們還是按照表格的結(jié)構(gòu)來構(gòu)建我們新模型的結(jié)構(gòu)體，然而這次會相對于前一篇文章的結(jié)構(gòu)有所改變。在這個模型中我們要關(guān)注的重點和難點是以下這兩點：
1、 t_m和b_m這兩個中間容器的寬度值必須是一個百分比的值，否則不能保證整個九宮格的左右動態(tài)伸展，它決不能為某個固定的像素值。其寬度等于總?cè)萜鲗挾葴p去兩側(cè)角容器寬度之和的百分比值。其計算公式為：
t_m（或b_m）的寬度=（總?cè)萜鲗挾?（左上角容器寬+右上角容器寬度））/總?cè)萜鲗挾?/strong>
也就是說t_m或b_m的寬度不是100%，然而t_l和t_r這兩個容器的寬度在實際案例中一般是一張圖片的寬度，所以它一般都是一個固定寬度值，這樣在一個同行的三個容器中，左右兩側(cè)寬度是固定值，而中間又要求是百分比，并且這三個容器的總寬度加起來應(yīng)該是100%，這該怎么辦呢？
這里我們采用一種比較穩(wěn)妥的辦法來讓中間容器能達(dá)到理想的寬度百分比：
我們可以用一個DIV容器，設(shè)置它的padding:0 10px;不設(shè)置它的寬度，默認(rèn)狀況下，它的寬度就是100%的。因為設(shè)置了左右的padding值，則其內(nèi)部的寬度就是我們要的t_m的理想寬度值，因此我們再給它內(nèi)部定義一個容器，這個子容器寬度設(shè)置為100%。這個子容器的背景色就可以設(shè)置為左右水平平鋪的背景圖片。這個子容器就是我們要用到的上頂邊容器。它滿足了我們對寬度值的特殊要求。
因此這個t_m的結(jié)構(gòu)就可以做成如下的結(jié)構(gòu)：
<div class="top"><span class="t_m"></span></div>
然而這樣定義會導(dǎo)致另外一個問題，這個問題在IE7以下的瀏覽器的都存在，因為我們定義了padding，會在下面的中間的主體層中也同時產(chǎn)生左右側(cè)的內(nèi)補丁，這里有點不明白的是：為什么會對IE7產(chǎn)生影響？
因此其補救方法是在這兒針對IE6和IE7應(yīng)用一個HACK技巧：
.b_l{margin-left:0px;+margin-left:-10px;_margin-left:-10px;}
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
這句話是針對三種瀏覽器設(shè)置不同的偏移值，將b_l和b_r向左右偏移到指定的位置。
2、 b_l和b_r這兩個容器的高度值必須相同，以使它們可以一直垂直向下平鋪背景色。這樣，當(dāng)中間主體內(nèi)容區(qū)（context）中內(nèi)容的高度發(fā)生改變時，其兩側(cè)的背景色能一直和主體內(nèi)容區(qū)（context）保持同一高度。也就是說它們能根據(jù)內(nèi)容主體的高度而自由地拉伸自己的高度值。
我們可以采用在平時工作中經(jīng)常用到的多列同高的方法來處理這個問題。這個方法就是采用內(nèi)補丁和負(fù)外補丁相結(jié)合的方式來達(dá)到多列同高：
.m_l,.m_r{padding-bottom:30000px;margin-bottom:-30000px;}
我們將m_l和m_r的下內(nèi)補丁padding-bottom的值設(shè)置為一個相對比較大的值，比如我將它們設(shè)置為30000px（你可以將它設(shè)置為你想要的值），相信一般的情況下，是不會超過這個高度值了。然后將下外補�。╩argin-bottom）設(shè)置為和下內(nèi)補�。╬adding-bottom）值相同的負(fù)值，將它拉回到原來的位置上，并將總?cè)萜鳎╞ox）設(shè)置overflow:hidden;，截除多余的高度，就可以保證兩列同高。
將上面兩個難點問題解決后，余下的事情就是簡單而愉快的事情了！
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 下一頁 牢不可破的九宮格布局 [2]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 牢不可破的九宮格布局 [1]
第 2 頁 
