CSS想不通爲什麼DIV消失

我試圖讓一些標籤的搜索欄，利用2幅圖像，裏面2個獨立的div，但由於某種原因，它只會顯示一個圖像。非此即彼。如果我從css註釋出home-searchbar-school ID，教授選項卡會顯示，否則只有學校會顯示，並顯示教授選項卡的位置。當我查看谷歌瀏覽器的開發助手中的div時，顯示它們在正確的位置，所以我很難過。CSS想不通爲什麼DIV消失

這裏的HTML：

<div id="home-searchbar"> 
    <div id="home-searchbar-tabs"> 
     <div id="home-searchbar-professor" class="home-searchbar-tab"> 

     </div> 
     <div id="home-searchbar-school" class="home-searchbar-tab"> 

     </div> 
    </div> 
    <div id="home-searchbar-container"> 

    </div> 
</div>

和CSS：

#home-searchbar{ 
    margin-left: 20px; 
    float: left; 
    height: 115px; 
    width: 980px; 
    background-color: green;  
} 

#home-searchbar-tabs{ 
    float: left; 
    width: 980px; 
    height: 32px; 
    background-color: red; 
} 

.home-searchbar-tab{ 
    background-color: yellow; 
    width: 190px; 
    height: 32px; 
    float: left; 
} 

#home-searchbar-professor{ 
    background: url('../img/searchtabs.png') 0 0 no-repeat; 
} 

#home-searchbar-professor{ 
    background: url('../img/searchtabsinactive.png') 0 -64px no-repeat; 
} 

#home-searchbar-container{ 
    float: left; 
    width: 980px; 
    height: 83px; 
    background-color: purple; 
}

的圖像是精靈，這些都是正常工作，所以我就只能上傳他們中的一個。其他圖像是相同的只是不同的配色方案。

另外一個隨機的小問題，是在div中有類和id的好風格嗎？我仍然在學習CSS，所以想知道這是否是在div中使用這兩種方法的最佳方式？

非常感謝您的幫助或建議！

enter image description here

來源

2013-01-03 samuraiseoul

嘗試在一個home-searc中分別添加一個兩個圖像hbar-professor div並使用css屬性顯示隱藏圖像：none或visibility：hidden。它是一種正確的方法，你可以同時使用class和id在同一div – Dineshkani

兩個背景CSS使用相同的ID，＃家搜索欄，教授 – Toping

這是它方舟，謝謝，我現在覺得這麼愚蠢。 – samuraiseoul

確定這裏就是答案：「既背景CSS使用相同的ID，＃家搜索欄，教授」

ty代表和你的CSS是好的順便說一句

來源

2013-01-03 12:09:20 Toping

非常感謝！只是想給它應有的功勞！ – samuraiseoul

#home-searchbar-professor{ 
    background: url('../img/searchtabs.png') 0 0 no-repeat; 
} 

#home-searchbar-professor{ 
    background: url('../img/searchtabsinactive.png') 0 -64px no-repeat; 
}

都稱之爲home-searchbar-professor，所以重命名一個home-searchbar-school

來源

2013-01-03 11:57:24 P1nGu1n

CSS想不通爲什麼DIV消失

回答

相關問題