三欄使用div問題

我一直在嘗試這一段時間了。我試圖是用DIV如下3列布局：三欄使用div問題

頁眉體 - 3列（左，中，右）頁腳

樣品我用：

HTML：

<head> 
<link rel="stylesheet" type="text/css" href="styles.css" /> 
</head> 
<body> 
<div id="header"> 
    <h1>Header</h1> 
</div> 
<div id="left"> 
    Port side text... 
</div> 
<div id="right"> 
    Starboard side text... 
</div> 
<div id="middle"> 
    Middle column text... 
</div> 
<div id="footer"> 
    Footer text... 
</div> 
</body>

CSS：

body { 
    margin: 0px; 
    padding: 0px; 
} 
div#header { 
    clear: both; 
    height: 50px; 
    background-color: aqua; 
    padding: 1px; 
} 
div#left { 
    float: left; 
    width: 150px; 
    background-color: red; 
} 
div#right { 
    float: right; 
    width: 150px; 
    background-color: green; 
} 
div#middle { 
    padding: 0px 160px 5px 160px; 
    margin: 0px; 
    background-color: silver; 
} 
div#footer { 
    clear: both; 
    background-color: yellow; 
}

我面臨的問題是，當我調整窗口大小時，，div開始收縮 - 我不希望發生這種情況。

我想要的佈局像http://www.w3schools.com/ 當我調整窗口的大小，div不收縮，而是不顯示其他列。

任何幫助表示讚賞。

來源

2011-05-31 asd

設置min-width屬性以停止元素收縮。

來源

2011-05-31 07:04:34 grc

沒有工作:( 仍然..即使有浮動屬性集..股利下面來彼此時，頁面大小.. – asd 2011-05-31 07:07:51

嘗試封閉所有的div在另一個DIV並設置最小寬度爲。 – grc 2011-05-31 07:09:30

+ 1 .. thx ..它的工作原理！ – asd 2011-05-31 07:19:15

我建議你將所有的div都包括在一個固定寬度或最小寬度集合中（正如其他人所建議的那樣）。

來源

2011-05-31 07:13:08 RRStoyanov

三欄使用div問題

回答

相關問題