爲什麼這些元素不在他們的DIV容器中？

我是新來的CSS，並不清楚爲什麼標題和菜單鏈接保留在容器內，而不是其他元素。我可以通過爲其他元素包含邊距來解決這個問題，但是我想知道爲什麼會發生這種情況。爲什麼這些元素不在他們的DIV容器中？

有一種方法，以保持容器內的元件，而無需指定邊距爲每個元素或（DIV）。例如，參見下面的JS小提琴代碼和代碼。我想保留#main內容在#container內。

的jsfiddle鏈接：http://jsfiddle.net/6qt8ry1L/

body { 
 
    background-color: #F7F7F0; 
 
} 
 
#container { 
 
    width: 1000px; 
 
    position: relative; 
 
    margin: 0 auto; 
 
    text-align: center; 
 
    background-color: #8e8e20; 
 
} 
 
header { 
 
    background-image: url("header.jpg"); 
 
    background-repeat: no-repeat; 
 
    height: 224; 
 
} 
 
h1 { 
 
    color: #ffffff; 
 
    padding: 10px; 
 
    text-align: left; 
 
} 
 
#nav ul { 
 
    list-style: none; 
 
    background-color: black; 
 
    height: 40px; 
 
    margin-top: 0; 
 
    color: white; 
 
} 
 
#nav li { 
 
    display: inline-block; 
 
    padding-top: 10px; 
 
    padding-left: 50px; 
 
    padding-right: 50px; 
 
    padding-bottom: 10px; 
 
} 
 
#MainContent { 
 
    margin-top: 10px; 
 
    padding-top: 20px; 
 
    border-top: 1px solid #545454; 
 
    background-color: #b6c5a3; 
 
    height: 200; 
 
    color: #492b40; 
 
    font: 11px/12px Verdana, Arial, Helvetica, sans-serif; 
 
} 
 
#col1 { 
 
    width: 20%; 
 
    height: 30%; 
 
    margin-top: 15px; 
 
    float: left; 
 
    background-color: lightgray; 
 
} 
 
#col2 { 
 
    float: left; 
 
    margin-left: 1%; 
 
    margin-top: 15px; 
 
    height: 30%; 
 
    width: 20%; 
 
    background-color: lightgray; 
 
} 
 
#col3 { 
 
    float: left; 
 
    margin-top: 15px; 
 
    width: 20%; 
 
    height: 30%; 
 
    margin-left: 1%; 
 
    background-color: lightgray; 
 
} 
 
#Content:after { 
 
    content: ''; 
 
    display: block; 
 
    clear: both; 
 
} 
 
#footer { 
 
    float: left; 
 
    margin-top: 20px; 
 
    padding-top: 20px; 
 
    border-top: 1px solid #545454; 
 
    background-color: #b6c5a3; 
 
    height: 60; 
 
    width: 950px; 
 
    color: #492b40; 
 
    font: 11px/12px Verdana, Arial, Helvetica, sans-serif; 
 
}

<html> 
 

 
<head> 
 

 
    <link rel="stylesheet" href="Style.css"> 
 

 
</head> 
 

 
<body> 
 

 
    <div id="container"> 
 

 

 
    <header> 
 

 
     <div id="heading"> 
 

 
     <h1> Hello there !!! </h1> 
 

 
     </div> 
 

 
    </header> 
 

 

 

 
    <div id="nav"> 
 

 

 
     <ul> 
 

 
     <li>Home</li> 
 
     <li>About</li> 
 
     <li>Contact</li> 
 
     <li>Links</li> 
 

 
     </ul> 
 

 
    </div> 
 

 

 
    </div> 
 

 
    <div id="MainContent"> 
 

 
    Main Content 
 

 
    </div> 
 

 

 
    <div id="Content"> 
 

 
    <div id="col1"> 
 

 
     Col1 
 

 
    </div> 
 

 
    <div id="col2"> 
 

 
     col2 
 

 
    </div> 
 

 
    <div id="col3"> 
 

 
     col 3 
 

 
    </div> 
 

 
    </div> 
 

 
    <div id="footer"> 
 

 

 
    <p>Copyright 2004 xyz Association</p> 
 

 
    <p>All rights reserved etc etc..</p> 
 

 
    </div> 
 

 
    </div> 
 
    <!--end container--> 
 

 
</body> 
 

 
</html>

來源

2015-10-11 Stingray

在CSS中有錯誤。長度需要單位;例如'224'必須是'224px'。如果你糾正這些問題，問題是否仍然存在？ –

您的容器被關閉剛剛結束的div＃後的資產淨值。把這個關閉的div放在最後，你的問題被修復了。

來源

2015-10-11 17:15:59

謝謝！幾乎是固定的。頁腳（#footer）不在容器內。你能解釋一下嗎？鏈接到代碼：http：//jsfiddle.net/n65fhutb/ – Stingray

刪除float：left;從頁腳 –

我注意到你有更多關閉標籤比你已經打開的DIV。作爲您創建<DIV>時的習慣，請務必立即插入</DIV>。跟蹤開幕式和閉幕式DIV。我猜測這種不匹配關閉DIV可能是你的問題的原因。

來源

2016-09-02 04:43:44 AndronsWeb

這個答案已經存在 –

爲什麼這些元素不在他們的DIV容器中？

回答

相關問題