Question

所以我已经在这个网站上工作了一段时间，但我遇到了一个问题。这有点难以解释所以首先我要展示它的截图： enter image description here 正如你所看到的，我可以继续堆叠我的sidebox div，但是一旦它经过主div，由于某种原因它会直接进入它上面的sidebox 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 {

}

Answer 1

您好，您必须使用其他包装器检查此bin http://jsbin.com/sowivuvi/1/

还有两个div #sidebar, #content

在超过主要高度后，Div会消失

1 个答案: