（HTML + CSS）頁面佈局採用div和浮動

http://imageshack.us/photo/my-images/171/screenshot01p.png/（HTML + CSS）頁面佈局採用div和浮動

您好，我目前正在網頁上的佈局，這是使用<div>和「浮動」屬性來完成。

如上圖所示，我的頁面佈局使用<div>分爲3個部分：
<div id="header">，標記通過紅色框
<div id="content">，標記由綠色框
<div id="footer">，標記由黃色框

然後我進一步將內容分成兩個部分（左&右）：

<div id="left"> 
<div id="right">

左二v將包含元素「a」（位於左上角）和「b」（位於左下角），而右側只包含「c」。

這是我實現它的代碼：

<div id="header"></div> 

<div id="content"> 
    <div id="left"> 
     <div id="topleft">a</div> 
     <div id="bottomleft">b</div> 
    </div> 
    <div id="right">c</div> 
</div> 

<div id="footer"></div>

和這裏的

#header { 
border: 5px solid red; 
} 

#content { 
    border: 5px solid greenyellow; 
    width: 1024px;  
    height: auto; 
} 

#footer { 
    border: 5px solid yellow; 
} 

#left { 
    float: left; 
    width: 480 px; 
    border: 1px solid black;   
} 

#topleft { 
    border: 1px solid black; 
} 

#bottomleft { 
    border: 1px solid black; 
} 

#right { 
    float: left; 
    width: 480 px; 
    border: 1px solid black;   
}

我用高度的CSS：在＃內容自動，因爲我期待的內容部分含AB後擴大和c，但看起來它不包含任何元素。相反，b和c的內容與頁腳重疊。

我曾嘗試在頁腳的CSS中使用「clear：both」 - 這似乎解決了重疊問題，但仍然沒有展開內容！（height = 0）

有什麼辦法解決這個問題嗎？

謝謝。

來源

2013-03-11 Stan

添加overflow:auto

#content { 
    border: 5px solid greenyellow; 
    width: 1024px;  
    height: auto; overflow:auto 
}

DEMO

來源

2013-03-11 12:12:48 Sowmya

哇，它的工作，謝謝隊友！ – Stan 2013-03-11 12:17:46

嗯，你寫的代碼似乎在IE瀏覽器正常工作。

來源

2013-03-11 12:43:36 Adarsh

永遠，永遠使用IE作爲參考如何工作。在這種情況下，它不起作用，但IE說它確實。顯然IE是錯誤的...一如既往。 – Rob 2013-03-11 13:00:29

（HTML + CSS）頁面佈局採用div和浮動

回答

相關問題