我是 CSS 的新手，我不清楚为什么标题和菜单链接保留在容器内而不是其他元素内。我可以通过包括其他元素的边距来解决这个问题，但我想了解为什么会这样。
有没有办法在不为每个元素或 (div) 指定边距的情况下将元素保留在容器中。例如，请参阅下面的 JS fiddle 代码和代码。我想将 #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>最佳答案
您的容器在关闭 div#nav 后立即关闭。 将关闭的 div 放在末尾，您的问题就会得到解决。
关于javascript - 为什么这些元素不在它们的 DIV 容器中？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33067762/