完美三欄網頁布局例子

來源:互聯網
上載者:User

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



相關文章

E-Commerce Solutions

Leverage the same tools powering the Alibaba Ecosystem

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。