|
最近在內(nèi)部討論關(guān)于“完美三欄”的話題,看到一篇“In Search of the Holy Grail”,相當(dāng)?shù)暮?故此翻譯之.
In Search of the Holy Grail
很抱歉我沒有將這篇文章命名.我不是想夸大他的重要性或是輕視其他的 Holy Grails.但是確實是這么稱呼，我們都明白它的含義.
三欄，一個是固定寬度的導(dǎo)航欄,另一個是GOOGLE廣告，或是Filckr圖片展示，就像Fancy的松露巧克力一樣，和一個重要的柔滑的夾心。在這個博客流行的黃金年代它是相當(dāng)適用的，加之相當(dāng)大的實現(xiàn)難度，理所應(yīng)當(dāng)?shù)墨@取了”圣杯”的名稱.
有很多文章是討論關(guān)于”圣杯”的，也有很多很好的模板可以使用。但是，所有的方案都是以犧牲以下特性為代價的：合理的內(nèi)容順序，寬度自適應(yīng)，合理的標(biāo)簽。這三者往往是這難以達到合理的布局中要折中的元素
在最近的一個項目中我終于找到了傳說中的圣杯。我在不會改變您的代碼和靈活性的前提下盡可能的描述他。他會是：
- 一個自適應(yīng)適應(yīng)的中心和固定寬度的側(cè)邊欄
- 允許中間的內(nèi)容先于其他出現(xiàn)在代碼中
- 允許任何一欄都是最高的高度
- 只需要額外的一個DIV標(biāo)簽
- 非常的簡單的CSS代碼和很少很少的HACK 補丁
站在巨人的肩膀上
這個技術(shù)的靈感來自于Alex Robinson’s的 One True Layout 。他曾經(jīng)在他的文章里闡述過”圣杯”的若干問題，但是他的解決方法需要兩個包裝并且要求每一欄都需要一個父級DIV，否則很難寫內(nèi)在結(jié)構(gòu).
另一方面則是由 Eric Meyer’s的寫法 想到的，他利用了多種類型的單元混合定位。它的例子中也是用了固定的側(cè)邊欄和自適應(yīng)的中心層，可是不幸的是，他依賴于近似的百分比，不是固定的值，而且填充了一部分隨屏幕分辨率不同而自適應(yīng)寬度的層。
出處：Alipay UED
責(zé)任編輯：moby
上一頁 下一頁 尋找圣杯 [2]
◎進入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 尋找圣杯 [1]
第 2 頁 
