浮动divs的问题

我想做一个3列的网站，但我似乎无法得到正确的导航显示正确。它总是显示在其他div下面。有人可以告诉我为什么会发生这种情况，以及它如何解决？浮动divs的问题

这里是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>

来源

2013-07-12 user2532869

其为B/C你是他们与body id不上浮分离。您需要设置三个div列并将widths设置为floating，并将它们相邻。

您还需要关闭你的头标记：

</h1>

在你的CSS，你忘了关闭大括号}为#topnav

我发现所有这些问题，只是看一眼。可能会有更多的徘徊。

总的来说，你的代码是一团糟，你应该考虑学习HTML和CSS多一点。

来源

2013-07-12 21:53:45 Chris78

谢谢你帮助我。你可能会猜到，这是我的第一个网站，我明白它肯定可以使用工作。 – user2532869

哦，没问题。我们都和你在同一个地方。学习的最佳方式是通过试验和错误:)挂在那里，很快就会成为你的第二天性。 – Chris78

将#符号放在所有backgroud-color:值的前面。给所有三列提供正确的width。 float: left,#body和#rightnav，假设你想要#leftnav,#body,#rightnav。此外，请关闭#topnav与}。

来源

2013-07-12 22:06:35 PHPglue

非常有趣。正如你可能猜到这是我的第一个网站，所以我会尝试着解决我的配色方案和布局。感谢您的帮助。 – user2532869

你应该也可以'#footer {clear：left;}'。 – PHPglue

Chris78是正确的，你错过#topnav规则集关闭}。您还应该将#rightnav div移到#body格之前。

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

来源

2013-07-12 22:08:15

浮动divs的问题

回答

相关问题