Div標籤內的Div標籤在Firefox或Chrome中不起作用

這似乎非常簡單，但我不知道爲什麼我無法在容器div標籤內放置div標籤，因爲它不會在Firefox或Chrome中正確顯示，但是它在IE6中工作...？代碼如下：Div標籤內的Div標籤在Firefox或Chrome中不起作用

<!doctype html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title></title> 
    <link rel="stylesheet" href="style.css" /> 
</head> 

<body> 
<div id="container"> 
    <div id="nav"> 
     <p>Hello</p> 
    </div> 
</div> 
</body> 
</html>

CSS：style.css中

body { 
    background:white; 
    font-family: sans-serif; 

} 
#container { 
    margin:0 auto; 
    width:960px; 
    background:#e3e3e3; 
    border:1px solid black; 
} 
#nav { 
    padding:10px; 
    margin-top:10px; 
    float:left; 
    width: 400px; 
    height:100px; 
    background:white; 
    border:1 px solid black; 
}

這是因爲如果在容器未與裏面的it..what給DIV標籤擴大？

來源

2011-09-15 Alkemee

這是一個常見的問題，人們面臨CSS。每當你浮動什麼東西時，就像你看到的那樣是父母崩潰。你可以解決它在以下幾個方面：

置容器
放溢於一個明確的高度：隱藏或溢出：自動在容器上
使用clearfix黑客：http://nicolasgallagher.com/micro-clearfix-hack/

我發現＃2在大多數情況下是最簡單和最好的。溢出時使用＃3：隱藏/自動具有不良副作用。

來源

2011-09-15 18:42:31

感謝這個，簡單的我忘記了基本的東西，我剛開始進入web開發，我想我錯過了一些基本的技巧！ – Alkemee

這是CSS的一個奇怪的方面，一旦你明白了這一點和其他一些怪癖，你將不可阻擋:) –

做overflow: hidden爲#container。

這是浮動的一個已知限制。

前：http://jsfiddle.net/N669N/
後：http://jsfiddle.net/N669N/1/

來源

2011-09-15 18:40:34

爲什麼要投票？ –

這是因爲#nav DIV浮動左側。浮動元素就是這樣 - 浮動的，除非有東西通過清除浮動物來固定它下面的框，否則浮動元素沒有高度。

.clear { clear: both }

並在浮動div下面添加一個div來清除它。

<div id="container"> 
    <div id="nav"> 
     <p>Hello</p> 
    </div> 
     <div class="clear"></div> 
</div>

對clearfixes一個非常詳細的回答，請參閱本SO問題：What methods of ‘clearfix’ can I use?

來源

2011-09-15 18:42:01 smdrager

這可行，但我發現額外的標記是不受歡迎的，特別是在不需要替代方法的情況下。 –

同意。我編輯了我的答案，並提供了一個關於最佳clearfix hack問題的鏈接。 – smdrager

Div標籤內的Div標籤在Firefox或Chrome中不起作用

回答

相關問題