爲什麼我的師在那裏？

我有幾個部門的網頁。前3個佔據頁面的整個寬度，從頂部向下170px。接下來是換行符，然後是第四個分區，它應顯示在前幾個分區的下方。相反，它顯示在頁面的頂部，在3個部門的下面。我已經檢查並重新檢查以確保各個部門都能正常關閉，但這不是問題所在。我將在下面發佈相關的代碼，首先是CSS，然後是HTML，因爲我正在使用單獨的樣式表。爲什麼我的師在那裏？

#banleft 
{ 
    padding-top: 20px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    text-align: center; 
    width: 200px; 
    height: 170px; 
} 

#bancenter 
{ 
    padding-top: 20px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    text-align: center; 
    width: 600px; 
    height: 170px; 
} 

#banright 
{ 
    padding-top: 20px; 
    margin-top: 0px; 
    margin-left: auto; 
    margin-right: auto; 
    float: left; 
    text-align: center; 
    width: 400px; 
    height: 170px; 
} 

#nav 
{ 
    background-image: url(../media/purplemenubar.jpg); 
    background-repeat: no-repeat; 
    padding-top: 3px; 
    padding-left: 30px; 
    padding-right: 90px; 
    margin-top: 0px; 
    margin-left: 0px; 
    margin-right: 0px; 
    width: 1150px; 
    height: 25px; 
} 

<div id="banleft">Content </div> 
<div id="bancenter">Content </div> 
<div id="banright">Content </div><br> 
<div id="nav" class="cambria3black">Content </div>

值得注意的是：我試過從最終的div中刪除類，但這並沒有幫助。另外，當我將實際內容放入「nav」div中時，它會顯示在頁面上的適當位置。它只是浮動到頂部和其他部門後面的部門背景圖像。

來源

2013-03-09 Blind Fish

你可以讓一個[jsfiddle]（http://jsfiddle.net）顯示你的問題？ – Daedalus 2013-03-09 01:52:14

將clear:both加到#nav的樣式中。可以考慮使用display:inline-block而不是float:left。

來源

2013-03-09 01:52:06

你，先生或女士，或血腥的搖滾明星。非常感謝。只要允許我這樣做，我會盡快給你答覆。 – 2013-03-09 02:00:36

爲什麼我的師在那裏？

回答

相關問題