2011-04-28 96 views
0

我不知道我需要用什麼來創建我的網站的基金。最後,我想要一個主要內容中有3列的設計結構。 (第1列=導航面板,第2列=內容中心,第3列=廣告面板)。靈活的盒子佈局或網格佈局或多列

什麼是最佳實踐(如果可能,使用CSS3)來實現這種設計?我介於柔性盒佈局或網格佈局或多列方法之間。 (我不明白什麼是最適合我的情況,爲了有一個簡單,靈活和少顯示bug解決方案)。我也希望我的網站儘可能填滿屏幕(使用更多可用空間)。

我是否需要定義屏幕分辨率,或者全部可以用%?

TKX,

+0

您需要支持哪些瀏覽器?如果你不擔心8之前的任何版本的IE,這一切都變得更加簡單。 – robertc 2011-04-28 23:07:00

回答

1

當實現結構,我通常這樣做以下的(僞碼):

<div id="wrapper"> 
    <div class="column" id="left"> 
    <div class="column" id="middle"> 
    <div class="column" id="right"> 

wrapper可以是固定的寬度或流體。我通常會在CSS中使用margin: 0 auto來固定寬度並將其居中。

left, middle, right用於列。我會在名爲column的類名中設置display: inline-block,並使用它在CSS中的id選擇器控制每個單獨的列大小。

我喜歡靈活的盒子佈局,儘管這很適合這個問題,但我還沒有玩得太多。如果我沒有弄錯,我認爲它在所有瀏覽器中都不被支持,但它可能值得一試。

就處理不同的屏幕尺寸而言,CSS中的媒體查詢是一種可行的方式。網絡上有大量的資源和分步指南,能夠讓你隨時瞭解這些情況。希望這可以幫助。