【冰極峰教程系列之二】：牢不可破的九宮格布局
原創(chuàng)：冰極峰 轉載請注明出處 時間：2009年6月22日 8:40:16
冰極峰教程系列之一：九宮格基本布局
冰極峰教程系列之二：牢不可破的九宮格布局
冰極峰教程系列之三：三層分離的完美九宮格
冰極峰教程系列之四：九宮格應用案例--極酷網(wǎng)頁播放器設計
冰極峰教程系列之五：無hack并支持透明圓角框的全兼容九宮格布局
在我的前一篇教程《九宮格基本布局》中，我介紹了用相對定位加絕對定位的方法來制作九宮格的基本布局。這是一種比較符合人們慣性思維的方法，好像制作過程中一切都是順理成章的事情，然而因為IE6讓人惡心的奇偶性BUG，使得這種布局方法要想通用變得有點遙不可及，因為國內大多數(shù)用戶還是用著IE6，我們不能因此而丟掉這部分用戶。
這個BUG目前是無藥可治，也沒有什么Hack技巧能運用，唯一能用的方式就是繞開它。也就是說我要定位這九宮格的四個角容器的位置，絕對定位的方法是不能采用的了，這不吝是一個重大的打擊，這將完全推翻我前一篇文章中用到的方法，我們只好另起爐灶了。
那么還有那些技術能夠拯救這個BUG于水深火熱之中呢？我們知道如果用左右浮動的方法能夠準確地將元素對象發(fā)生偏移，并且這種方法也能避免IE6的奇偶性BUG。OK，我們就用它了。
【布局的重點和難點】
我們還是按照表格的結構來構建我們新模型的結構體，然而這次會相對于前一篇文章的結構有所改變。在這個模型中我們要關注的重點和難點是以下這兩點：
1、 t_m和b_m這兩個中間容器的寬度值必須是一個百分比的值，否則不能保證整個九宮格的左右動態(tài)伸展，它決不能為某個固定的像素值。其寬度等于總容器寬度減去兩側角容器寬度之和的百分比值。其計算公式為：
t_m（或b_m）的寬度=（總容器寬度-（左上角容器寬+右上角容器寬度））/總容器寬度
也就是說t_m或b_m的寬度不是100%，然而t_l和t_r這兩個容器的寬度在實際案例中一般是一張圖片的寬度，所以它一般都是一個固定寬度值，這樣在一個同行的三個容器中，左右兩側寬度是固定值，而中間又要求是百分比，并且這三個容器的總寬度加起來應該是100%，這該怎么辦呢？
這里我們采用一種比較穩(wěn)妥的辦法來讓中間容器能達到理想的寬度百分比：
我們可以用一個DIV容器，設置它的padding:0 10px;不設置它的寬度，默認狀況下，它的寬度就是100%的。因為設置了左右的padding值，則其內部的寬度就是我們要的t_m的理想寬度值，因此我們再給它內部定義一個容器，這個子容器寬度設置為100%。這個子容器的背景色就可以設置為左右水平平鋪的背景圖片。這個子容器就是我們要用到的上頂邊容器。它滿足了我們對寬度值的特殊要求。
因此這個t_m的結構就可以做成如下的結構：
然而這樣定義會導致另外一個問題，這個問題在IE7以下的瀏覽器的都存在，因為我們定義了padding，會在下面的中間的主體層中也同時產生左右側的內補丁，這里有點不明白的是：為什么會對IE7產生影響？
因此其補救方法是在這兒針對IE6和IE7應用一個HACK技巧：
.b_r{margin-right:0px;+margin-right:-10px;_margin-right:-10px;}
這句話是針對三種瀏覽器設置不同的偏移值，將b_l和b_r向左右偏移到指定的位置。
2、 b_l和b_r這兩個容器的高度值必須相同，以使它們可以一直垂直向下平鋪背景色。這樣，當中間主體內容區(qū)（context）中內容的高度發(fā)生改變時，其兩側的背景色能一直和主體內容區(qū)（context）保持同一高度。也就是說它們能根據(jù)內容主體的高度而自由地拉伸自己的高度值。
我們可以采用在平時工作中經常用到的多列同高的方法來處理這個問題。這個方法就是采用內補丁和負外補丁相結合的方式來達到多列同高：
我們將m_l和m_r的下內補丁padding-bottom的值設置為一個相對比較大的值，比如我將它們設置為30000px（你可以將它設置為你想要的值），相信一般的情況下，是不會超過這個高度值了。然后將下外補?。?/span>margin-bottom）設置為和下內補丁（padding-bottom）值相同的負值，將它拉回到原來的位置上，并將總容器（box）設置overflow:hidden;，截除多余的高度，就可以保證兩列同高。
將上面兩個難點問題解決后，余下的事情就是簡單而愉快的事情了！
【結構層】
現(xiàn)在我們將結構層在前一個案例的基礎上作了一下調整，因此就成了下面這樣一種結構了：
<!--第一行—頂部*/-->
<div class="top"><span class="t_m"></span></div>
<span class="t_l"></span>
<span class="t_r"></span>
<!--第二行—中間內容區(qū)*/-->
<span class="m_l"></span>
<span class="m_r"></span>
<div class="context">內容主體區(qū)域</div>
<!--第三行—底部*/-->
<div class="b_m"><span></span></div>
<span class="b_l"></span>
<span class="b_r"></span>
</div>
下面是主要的樣式設置：
.box{overflow:hidden;width:50%;margin:50px auto 0;background:#fff;}
.box span{display:block;}
/*頂部樣式*/
.top{height:10px;padding:0 10px;}
.t_l,.t_r{width:10px;height:10px;font-size:0%;margin-top:-10px;}
.t_l{float:left;background:#ff0000;}/*左上角*/
.t_r{float:right;background:#ff0000;}/*右上角*/
.t_m{height:10px;font-size:0%;width:100%;background:#7F0000;}/*這是可左右伸展的區(qū)域，兩例留出空白便于放置左右角容器*/
/*中間樣式*/
.m_l,.m_r{width:10px;padding-bottom:30000px;margin-bottom:-30000px;}/*兩列等高*/
.m_l{float:left;margin-left:0px;+margin-left:-10px;_margin-left:-10px;background:#7F0000;} /*左邊框*/
.m_r{float:right;margin-right:0px;+margin-right:-10px;_margin-right:-10px;background:#7F0000;} /*右邊框*/
/*底部樣式*/
.b_m{padding:0 10px;height:10px;}/*這是可左右伸展的區(qū)域，兩例留出空白便于放置左右列同高容器*/
.b_m span{width:100%;height:10px;font-size:0%;background:#7F0000;}
.b_l,.b_r{height:10px;font-size:0%;width:10px;margin-top:-10px;}
.b_l{float:left;background:#ff0000;}/*左下角*/
.b_r{float:right;background:#ff0000;}/*右下角*/
經過上述設置后，我們的九宮格就算完成了，它是“牢不可破”的，會隨著內容主體的寬高動態(tài)地向各個方向自由伸展。在此模型中，為了演示的效果，我將總容器的寬度設置了一個百分比50%，你可以根據(jù)你的實際需要調整它的大小，其內部會隨著它的寬度值自動填充整個區(qū)域，不會撐破父容器。如下圖所示：
你可以用八張圖片來制作一個漂亮的九宮格盒子?？纯此耐昝辣憩F(xiàn)。
本模型在以下瀏覽器中測試通過：
IE5.5、IE6、IE7、IE8、FF3、TT、Maxthon2.1.5、Opera9.6、Safari4.0、Chrome2.0。
如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！ 點擊進入論壇
