lixiangni

最近在內部討論關於“完美三欄”的話題,看到一篇“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的寫法 想到的，他利用了多種類型的單元混合定位。它的例子中也是用了固定的側邊欄和自適應的中心層，可是不幸的是，他依賴於近似的百分比，不是固定的值，而且填充了一部分隨屏幕分辨率不同而自適應寬度的層。