基本的html佈局問題

我正在嘗試構建一個頁面，其中包含一個框狀的佈局。頂部橫幅底部橫幅，兩個導航面板（左側和右側）以及一些將出現在中間的文本。基本的html佈局問題

現在我想知道如果你可以創建類似的東西，而不使用表格和邊緣沒有預定義/硬編碼的值。

這可能嗎？

在此先感謝

邁克

來源

2011-04-14 mixkat

http://www.noupe.com/css/9-timeless-3-column- layout-techniques.html – Adam 2011-04-14 23:13:35

如果這是你的意思，你可以實現集中彈性的三列布局，這樣的頁眉和頁腳就像這樣？

的HTML：

<div id="top"></div> 
<div id="left"></div> 
<div id="right"></div> 
<div id="middle"></div> 
<div id="bottom"></div>

和CSS：

#top,#bottom{ 
    width:100%; 
    height:70px; 
    background:silver; 
    clear:both; 
} 
#middle{ 
    background:green; 
} 
#middle,#left,#right{ 
    height: 200px; 
} 
#left,#right{ 
    width: 200px; 
    background:skyblue; 
} 
#left{ 
    float:left; 
} 
#right{ 
    float:right; 
}

小提琴：http://jsfiddle.net/hkrVz/

來源

2011-04-14 23:19:39

嗯..他知道當中心增長超過200px時會發生什麼事情嗎？我想知道嗎？ – SpliFF 2011-04-14 23:51:22

他知道如何解決它..？你將如何解決它？你可以在頂部放一個透明的像素圖像......但是我們停止了這麼做？我們可以在頂部的div上使用'min-width：200px'，但是它可以在所有的瀏覽器中運行。我們可以添加一些JavaScript來檢測窗口大小並相應地重新調整大小...或其他內容？你會怎麼做？ – 2011-04-14 23:55:16

大聲笑...剛剛來到了！ – mixkat 2011-04-15 00:04:39

您可使用的div和display:table，display:table-row，display:table-cell任何表狀結構，你會不會在標記濫用表語義。這真的取決於您是否需要支持IE7，因爲我認爲這些CSS屬性僅在IE8中引入（幾年後其他人都擁有它們）。

如果這將是一個問題，那麼只要找到靈活的選項來做你所需要的。我真的不知道爲什麼硬編碼的邊距甚至會成爲一個問題，所以你可能需要更詳細地解釋你正在嘗試的內容。

來源

2011-04-14 23:14:49 SpliFF

'display：table - *;'最大的缺點之一就是無法實現類似於'colspan'或'rowspan'的功能。 – drudge 2011-04-14 23:21:39

基本的html佈局問題

回答

相關問題