DIV CSS 佈局教程網

最近在內部討論關於“完美三欄”的話題,看到一篇“In Search of the Holy Grail”,相當的好.故此翻譯之.

In Search of the Holy Grail

很抱歉我沒有將這篇文章命名.我不是想誇大他的重要性或是輕視其他的 Holy Grails.但是確實是這麼稱呼，我們都明白它的含義.

三欄，一個是固定寬度的導航欄,另一個是GOOGLE廣告，或是Filckr圖片展示，就像Fancy的松露巧克力一樣，和一個重要的柔滑的夾心。在這個博客流行的黃金年代它是相當適用的，加之相當大的實現難度，理所應當的獲取了”聖杯”的名稱.

有很多文章是討論關於”聖杯”的，也有很多很好的模板可以使用。但是，所有的方案都是以犧牲以下特性為代價的：合理的內容順序，寬度自適應，合理的標簽。這三者往往是這難以達到合理的布局中要折中的元素

在最近的一個項目中我終於找到了傳說中的聖杯。我在不會改變您的代碼和靈活性的前提下盡可能的描述他。他會是：

• 一個自適應適應的中心和固定寬度的側邊欄
• 允許中間的內容先於其他出現在代碼中
• 允許任何一欄都是最高的高度
• 只需要額外的一個DIV標簽
• 非常的簡單的CSS代碼和很少很少的HACK 補丁

站在巨人的肩膀上

這個技術的靈感來自於Alex Robinson’s的 One True Layout 。他曾經在他的文章裡闡述過”聖杯”的若干問題，但是他的解決方法需要兩個包裝並且要求每一欄都需要一個父級DIV，否則很難寫內在結構.
另一方面則是由 Eric Meyer’s的寫法 想到的，他利用了多種類型的單元混合定位。它的例子中也是用了固定的側邊欄和自適應的中心層，可是不幸的是，他依賴於近似的百分比，不是固定的值，而且填充了一部分隨屏幕分辨率不同而自適應寬度的層。

言歸正傳，看看代碼

代碼是很直觀而且很優雅的。
(為了直觀起見，我們使用了非語義化的”中心”、”左”和”右”來闡述我們的代碼，但是我們建議您在您的代碼中使用語義化的標簽 -Ed.)

<div id="header"></div>
<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>
</div>
<div id="footer"></div>

一個額外的DIV包含著我們的三個層,這樣的結構符合我集中內容上一體的標記為一體的習慣(obsessive compulsive markup habits. 翻譯的不准確)
樣式很也簡單,左邊側欄是200PX,右邊是150,為了簡便標示用LC,RC,CC分別代表左邊,右邊和中間,樣式如下:

body {
  min-width: 550px;      /* 2x LC width + RC width */
}
#container {
  padding-left: 200px;   /* LC width */
  padding-right: 150px;  /* RC width */
}
#container .column {
  position: relative;
  float: left;
}
#center {
  width: 100%;
}
#left {
  width: 200px;          /* LC width */
  right: 200px;          /* LC width */
  margin-left: -100%;
}
#right {
  width: 150px;          /* RC width */
  margin-right: -150px;  /* RC width */
}
#footer {
  clear: both;
}
/*** IE6 Fix ***/
* html #left {
  left: 150px;           /* RC width */
}

重新度量你想要的模型的價值,你會發現其實很簡單.這布局能在Op