浮動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的問題

回答

相關問題