Web佈局連載——兩欄固定佈局（五）

在上一篇《Web佈局連載——兩欄固定佈局（四）》中留了一個下文，「No div, no float, no clear, no hack」。看起來頗有意思，這種沒有div，沒有float，沒有清除浮動和沒有hack的佈局，仍是看到的少數，固然除了 table佈局。由於table佈局是不須要使用前面說的幾個部分。那麼今天咱們要講的佈局是否是table佈局呢？欲想知道，那就一塊兒隨着往下看吧。

首先今天這個佈局的思路是來自於sneak peek的《No div, no float, no clear, no hack*, no joke!》一文。雖然整個頁面看到不到table的有關標籤，可是其佈局的原理倒是和table如出一轍。那麼咱們實現以下所示的效果，究竟要怎麼來寫呢？

既然原理是來自於表格，那麼表格的結構，我想不用我在這裏多說，你們應該都知道，若是您不知道，那加緊補習一下html中的表格標籤相關應用。表格用於佈局，最大的時候是整個頁面都是table，並且table裏還有table，層層關係是那個複雜呀，頭痛。可今天要說的，咱們只是運用table的原理來佈局，並且只是運用在分欄部分。具體的咱們來看：

HTML結構

<div id="wp">
 <div id="hd">Header</div>
  <div id="bd">Body
   <div id="doc">
    <div id="s1">sidebar content</div>
    <div id="s2">main content</div>
   </div>
  </div>
 <div id="ft">Footer</div>
</div>

上面的結構其實很相似於前面幾篇文章介紹的佈局結構，只是在兩個方面不同，其一是類名換了；其二是頁面主內容的結構更深層了。爲了幫助你們更好的理解這個結構，我簡單的說一下他們各起的做用：

1. div#wp是整個頁面的容器;相似於div#wrapper
2. div#hd是整個頁面的頭部容器，相似於div#header
3. div#bd是整個頁面的主體部分，相似於div#body；其主要包含了邊欄和主內容兩個部分，固然有時還有其餘欄；
4. div#doc是整個頁面主體的列包容器；
5. div#s1和div#s2是頁面佈局中的列；相似於div#sidebar和div#main-content
6. div#ft是整個頁面的腳部容器，相似於div#footer

其中最爲關鍵的是div#bd在這裏至關於table，div#doc在這裏至關於表格的行table-row，而div#s1和div#至關於表格的單元格table-cell。但是上面有div，開頭不用div等佈局，所以sneak peek將整個div佈局換成了列表嵌套的形式，但用div也不會影響整個佈局效果。接下來看看修改後的結構：

<ol id="wp">
  <li id="hd">
    <div class="container">
			<h2>Header content</h2>		
    </div>
  </li>
  <li id="bd">
    <ol id="doc">
      <li id="s1">
        <div class="container">
          <h2>Sidebar Content</h2>
        </div>
      </li>
      <li id="s2">
        <div class="container">
          <h2>Main Content</h2>
        </div>
      </li>
    </ol>
  </li>
    <li id="ft">
      <div class="container">
        <h2>Footer Content</h2>
      </div>
    </li>
</ol>

初一看以爲理解不透，我也沒整明白爲何要用列表，不過我建議使用div會更易理解。咱們也不糾結於結構用什麼樣的標籤，接下來看佈局樣式的實現：

CSS Code

* {
  margin: 0;
  padding: 0;
}
body {
  font-family: 'Amarante', cursive;
  background: url(http://www.w3cplus.com/sites/default/files/bg_body.png) repeat;
  text-align: center; /*IE6下讓元素居中*/
}
/*==========================================================*\
 *
 * Layout
 * #wp = wrapper 整個容器
 * #hd = header  頭部
 * #bd = body 主體容器
 * #ft = footer 腳部
 * #doc = document 主體
 * #s1,#s2 = column 列
 *
\*==========================================================*/
#wp {
  width: 960px;/*頁面寬度*/
  margin: 0 auto; /*水平居中*/
  list-style-type: none;/*去掉列表默認類型符號*/
  text-align: left;/*重置文本左對齊*/
}
#bd {
  display: table;/*表格顯示*/
  table-layout: fixed;/*這個很重要*/
  border-collapse: separate;
}
/*在ie6下詞內換行*/
*html #bd {
  word-wrap: break-word;
}
#doc {
  display: table-row;/*表格行顯示*/
}
#s1,#s2 {
  display: table-cell;/*表格單元格顯示*/
}
/*ie6-7下不支持display:table-cell，所以換成下面的代碼*/
#s1,#s2,{/*注意選擇器後面的逗號不能丟，這個很是重要，否則ie6下無效果*/
  display:inline;
	zoom:1;
	vertical-align:top;
	position: relative;
	margin-top: -20px;
	overflow-x:hidden;
}
#s1 {
  width: 220px;/*側欄寬度*/
}
#s2 {
  width: 720px;/*主內容寬度*/
  padding-left: 20px;/*由於這個是單元格表現形式，因此不能使用margin-left來控制兩列的間距，須要使用padding*/
}
/*兼容mac下的IE低版本寫法*/
/*\*//*/
  #s1,#s2 {
    display:inline-block;
    float: left;
  }
#ft {
  clear:both;
}
/**/

/*裝飾樣式*/
#hd {
  padding-bottom: 10px;
}
#bd {
  padding-bottom: 10px;
}
#hd .container{
  background-color: #b1b1b1;
  color: #fff;
}
#s1 .container{
  background-color: #E7DBD5;
}
#s2 .container{
  background-color: #F2F2E6;
}
#doc .container {
  min-height: 200px;
  height: auto !important;
  height: 200px;
}
#ft .container{
  background-color: #b1b1b1;
  color: #fff;
}

這樣一來咱們就使用列表（你也可使用其餘的標籤）製做了一個相似於表格功能的佈局效果，

上面的案例是側欄在左邊，主內容在右邊，若是要製做一個側欄在右邊，主內容在左邊，只須要根據須要將div#s1和#div#s2的寬度值進行必定的轉換便可。

這種佈局方法通過測試，能夠兼容全部瀏覽器。雖說no div, no float, no clear, no hack。其實仍是多少使用到了hack技巧，若是不使用，在IE六、7下是沒法實現這樣的佈局效果。這種方法其實也是製做等高兩欄佈局的一個好方法，固然這種方法也只限於兩欄佈局，你能夠在div#doc內添加更多的列div#s3,div#s4...之類，只是前提條件，他們的寬度與列與列之間的間距總各不能大於div#wrap的寬度。

若是您對這種佈局方法感興趣的話，不仿在閱讀一下sneak peek的《No div, no float, no clear, no hack*, no joke!》和《A CSS layout that does not rely on DIV, FLOAT, CLEAR nor structural HACK!》，從中找到你還不瞭解的地方。

到目前爲止這個系列爲你們介紹了五種不一樣的兩欄固定佈局方法，前面四種以下所示：

1. 《Web佈局連載——兩欄固定佈局（一）》
2. 《Web佈局連載——兩欄固定佈局（二）》
3. 《Web佈局連載——兩欄固定佈局（三）》
4. 《Web佈局連載——兩欄固定佈局（四）》

其實真正加起來也並不僅五種，從中也有介紹其餘的實現方法，下一回爲你們介紹第六篇，兩欄等高佈局，喜歡的同窗敬請觀注w3cplus的相關更新。

上一節：《Web佈局連載——兩欄固定佈局（四）》

如需轉載，煩請註明出處：http://www.w3cplus.com/css/layout/fixed-layout/two-columns-5.html