我已经搜索过,但似乎找不到我想要的答案。

我想知道如何将div向下移到固定标题下方。



@import url(http://fonts.googleapis.com/css?family=Oswald);
body {
    width: 100%;
    margin: auto;
}

.container {
    width: 75%;
    margin: 0 auto;
}

.header {
    background: #6396bc;
    width: 100%;
    top: 0;
    position: fixed;
}

.logo {
    float: left;
    font-family: "Oswald", sans-serif;
    font-size: 15px;
    margin-left: 15%
}

a {
    text-decoration: none;
    color: white;
}

li {
    list-style: none;
    float: left;
    margin-left: 15px;
    padding-top: 15px;
    font-family: "Oswald", sans-serif
}

.nav {
    float: right;
    margin-right: 15%
}

<!DOCTYPE html>
<html>
    <head>
        <title>team Zeus | Home</title>
        <link rel="stylesheet" href="../stylesheets/styles.css">
    </head>

    <body>
        <div class="header">
            <div class="container">
                <div class="logo">
                    <h1><a href="#">team Zeus</a></h1>
                </div>

            <div class="nav">
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Page</a></li>
                    <li><a href="#">Another page</a></li>
                    <li><a href="#">1 other page</a></li>
                </ul>
            </div>
            </div>
        </div>

        <div class="container">

        <div class="content">
            <p>I copied and pasted some article from Wikipedia in here, you could do that too (to test out the header at the top)</p>
        </div>
    </body>
</html>





我认为这与容器有关,因为当我尝试用宽度调整它们的大小时,它只会弄乱整个页面。我想不明白

谢谢

最佳答案

您是说只将内容移到标题下方?如果那是您想要的,只需将内容div定位如下:

.div {
      position:relative;
      top: 100px;
}

10-08 00:53