Question

我在我的网站上编写了一个小容器，它一直坚持顶部..有人可以帮助我做到这一点，所以它在第二个栏下？

以下是我的例子： 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);
    }

该等级的白色容器是＆＃39; mainContainer＆＃39;，我想让它在20px的深蓝色条下。

出于某种原因，我尝试过的所有事情都无法奏效。请帮忙＆lt; 3

Answer 1

在.nav中包裹.bar和div.clearfix：

<div class="clearfix">
 (...)
</div>

然后在CSS中：

.clearfix:after {display:table; content:""; clear:both;}

并将margin-top:10px;添加到.mainContainer。

Answer 2

尝试使用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;
}

DIV继续扩张

2 个答案: