我正在我的网站上编写一个小容器，它一直停留在顶部。有人可以帮我把它放在第二个栏下面吗？
这是我的例子: jsFiddle
<!DOCTYPE html>
<html>
<head>
<title>NO NAME</title>
<link rel="stylesheet" type="text/css" href="/Base/Includes/CSS/Main.css">
</head>
<body>
<div class="nav">
<li>
<a href="/">Home</a>
</li><li>
<a href="/News/">News</a>
</li><li>
<a href="/User/">Users</a>
</li><li>
<a href="/Forum/">Forum</a>
</li><li>
<a href="/Shop/">Shop</a>
</li><li>
<a href="/UserShop/">User Shop</a>
</li></li>
</li></li>
</div>
<div class="bar" style="float:right; text-align:right; padding-right: 20px;">
<li>
<a href="/SignUp">Sign Up</a>
</li><li>
<a href="/SignIn">Sign In</a>
</li>
</div>
<div class="mainContainer">
a
body{
margin:0px;
padding:0px;
font-family: Helvetica, Tahoma, Arial, sans-serif;
background-color: #F3F3F3;
background-repeat: repeat-x;
color: #333;
height: 100%;
}
.nav {
width: 100%;
background-color: #569BCC;
font-family: Helvetica, Arial, sans-serif;
height: 60px;
text-align:center;
text-align: left;
float: right;
}
.nav ul {
list-style: none;
display: block;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.nav li {
display: inline-block;
background-color: #569BCC;
padding-left: 10px;
padding-right: 10px;
height: 60px;
}
.nav li:first-of-type {
border-left: 1px solid #999;
}
.nav li:hover {
background-color: #46789C;
cursor: pointer;
}
.nav #active {
background-color: #46789C;
}
.nav li a {
display: inline-block;
box-sizing: border-box;
height: 100%;
line-height: 60px;
padding-left: 10px;
padding-right: 10px;
color: #C4C4C4;
text-decoration: none;
}
.publicNotification {
background-color: #;
width: 100%;
height: auto;
min-height: 4px;
padding: 3px;
text-align: center;
}
.bar {
width: 100%;
background-color: #32678C;
font-family: Helvetica, Arial, sans-serif;
height: 40px;
text-align: right;
text-align: left;
float: right;
margin-bottom: 10px;
}
.bar ul {
list-style: none;
display: block;
margin: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
.bar li {
display: inline-block;
background-color: #32678C;
padding-left: 10px;
padding-right: 10px;
height: 40px;
}
.bar li:first-of-type {
}
.bar li:hover {
background-color: #46789C;
cursor: pointer;
}
.bar #active {
background-color: #46789C;
}
.bar li a {
display: inline-block;
box-sizing: border-box;
height: 100%;
line-height: 40px;
padding-left: 10px;
padding-right: 10px;
color: #C4C4C4;
text-decoration: none;
}
.mainContainer {
width: 970px;
margin-left: auto;
margin-right: auto;
padding: 3px;
background-color: #FFFFFF;
border-radius: 2px;
min-height: 5px;
box-shadow: 1px 1px 5px rgba(167, 172, 185, 0.75);
}
类的白色容器是“mainContainer”，我希望它在深蓝色条下方 20 像素。
出于某种原因，我尝试过的所有方法都行不通。请帮助<3
最佳答案
尝试使用clear: both;
.mainContainer {
width: 970px;
margin-left: auto;
margin-right: auto;
padding: 3px;
background-color: #FFFFFF;
border-radius: 2px;
min-height: 5px;
box-shadow: 1px 1px 5px rgba(167, 172, 185, 0.75);
clear: both;
}
关于html - DIV 不断扩大，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28652830/