Question

我正在尝试建立一个3列网站，但我似乎无法正确显示正确的导航。它始终显示在其他div下方。有人可以告诉我为什么会发生这种情况以及如何解决这个问题？

这是CSS：

body {
    background-image:url('images/background.png');
    background: no-repeat center center fix;
    background-size: cover;
    background-attachment: fixed;
}

p {
    margin: 0px;
    color: #231f20;
    font-size: 16px;
    font-family: "Garamond Premier Pro", serif;
    text-align: left;
}

h1 {
    margin: 0px;
    color: #231f20;
    display: inline-block;
    text-align: center;
    font-size: 24px;
    font-family: "Myriad Pro", sans serif;
}

#container {
    margin-left: auto;
    margin-right: auto;
    width: 960px;
    height: 750px;
}

#header {
    width: 960px;
    height: 100px;
}

#marquee {
    width: 960px;
    height: 30px;
    font-size: 24px;
    background-color: #bc34ba;
    font-family: "Garamond Premier Pro", serif;
}

#topnav {
    border-bottom: 1px #000 solid;
    margin: 0px;
    padding: 0px 0px 0px 0px;
    width: 960px;
    height: 20px;
    background-color: fed450;

#leftnav {
    margin: 0px;
    font-family: "Century Gothic", sans serif;
    float: left;
    width: 160px;
    background-color: f58025;
    text-align: left;
    height: 580px;
}

#body {
    margin: 0px;
    border-right: 1px dashed #694717;
    width: 640px;
    height: 580px;
    margin: auto;
    padding: 10px 0px 0px 10px;
    background-color: d80074;
}

#rightnav {
    margin: 0px;
    font-family: "Century Gothic", sans serif;
    float: right;
    width: 160px;
    background-color: c1d82f;
    text-align: right;
    height: 580px;
}

#footer {
    width: 960px;
    height: 20px;
    text-align: center;
    clear: both;
}

这是HTML：

<div id="container">
    <div id="header"></div>
    <div id="marquee"></div>
    <div id="topnav"></div>
    <div id="leftnav"></div>

    <div id="body">
        <h1>Title<h1>
        <br>
        <p>This is where the content is.</p>
    </div>

    <div id="rightnav"></div>
    <div id="footer"></div>
</div>

Answer 1

用b / c分隔它们与不浮动的body id。您需要设置三个div列并将widths与floating设置为彼此相邻。

您还需要关闭标题标记：

</h1>

在您的css中，您忘记了}

的结束大括号#topnav

我快速浏览了所有这些问题。可能会有更多的挥之不去。

总的来说，你的代码很乱，你应该考虑更多地学习HTML和CSS。

Answer 2

在所有#值前加上backgroud-color:符号。为所有三列提供适当的width。 float: left和#body上的#rightnav，假设您需要#leftnav，#body，#rightnav。另外，使用#topnav关闭}。

Answer 3

Chris78您错过}规则集上的结束#topnav是对的。您还应该将#rightnav div移到#body div之前。

您可能需要考虑为布局使用网格解决方案。这是just one example

浮动div的问题

3 个答案: