所以我已经在这个网站上工作了一段时间，但我遇到了一个问题。这有点难以解释，所以首先我要展示它的截图:
如您所见，我可以继续堆叠边箱 div，但一旦它越过主 div，由于某种原因它会直接进入其上方边箱 div 的右侧。
我尝试了不同的修复方法，但我还没有成功。
HTML
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div id="wrapper">
<!--Navigation-->
<div id="sidebox">
<div id="nav">
<ul>
<a href=""><li>HOME</li></a>
<a href=""><li>REGISTER</li></a>
<a href=""><li>DOWNLOADS</li></a>
<a href=""><li>CHAT BOX</li></a>
<a href=""><li>FORUM</li></a>
<a href=""><li>RANKINGS</li></a>
<a href=""><li>DONATE</li></a>
</ul>
</div>
</div>
<!--Banner-->
<div id="banner"></div>
<!--Main Content-->
<div id="main">
</div>
<div class="clear"></div>
<!--Server Information-->
<div id="sidebox">
</div>
<!--Partners-->
<div id="sidebox">
</div>
<div id="sidebox">
</div>
<div id="sidebox">
</div>
<div id="sidebox">
</div>
<div id="sidebox">
</div>
<div id="sidebox">
</div>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-image: url('../img/bg.png');
}
#wrapper {
width: 960px;
margin: 20px auto 0;
}
#banner {
width:712px;
height:175px;
background-color: #333;
border: 1px solid black;
outline: 2px solid #444;
margin-bottom:14px;
float:right;
}
#sidebox {
background-color: #333;
border: 1px solid black;
outline: 2px solid #444;
width:230px;
min-height:100px;
float:left;
margin-bottom:14px;
}
#nav {
font-family: arial;
background:red;
}
#nav ul {
list-style-type: none;
}
#nav ul li {
background: url('../img/navbg.jpg');
padding-top:5px;
padding-bottom: 5px;
padding-left:5px;
border-bottom: #262626 solid;
border-top: #262626 solid;
border-width: 1px;
}
#nav ul li:hover{
background: url('../img/navbghov.jpg');
}
#nav ul a {
color: #808080;
font-size: 14px;
text-decoration: none;
}
#main {
background-color: #333;
border: 1px solid black;
outline: 2px solid #444;
float:right;
width:712px;
min-height:600px;
}
.clear {
}
最佳答案
你好，你必须使用额外的包装检查这个垃圾桶 http://jsbin.com/sowivuvi/1/
还有两个div #sidebar, #content
关于html - 超过主 Div 高度后 Div 困惑，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/24263898/