2017-05-29 94 views
0

有人能告訴我爲什麼我能夠風格的頭類,但不是我的MainContent類?只有Lorum Ipsum文字出現。 maincontent div不顯示任何寬度,高度或顏色。謝謝你的幫助!爲什麼我的CSS不適用於我的下一個divs?

.header { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: blue; 
 
} 
 

 
.header img { 
 
height: 80%; 
 
margin-top: 10px; 
 
margin-left: 260px; 
 
} 
 

 
.MainContent { 
 
    width: 100%; 
 
    height: 80%; 
 
    background-color: yellow; 
 
}
<div class="header"> 
 
\t <img src="img/epic_it.png" alt="epicit logo"> 
 
\t <nav></nav> 
 
</div> 
 

 
<div class="MainContent"> 
 
\t <h1> 
 
\t Lorem ipsum 
 
\t </h1> 
 
</div>

回答

0

你必須在你.header img聲明,目前正在考慮將一個CodeMirror invalid character結束一個很奇怪的一塊標記,並造成緊隨其後的打破任何CSS。如果您修改了代碼段,則會在該代碼段中看到一個紅色圓圈,儘管它在代碼段預覽中不可見。

只需去除解決了這個問題:

.header { 
 
    width: 100%; 
 
    height: 90px; 
 
    background-color: blue; 
 
} 
 

 
.header img { 
 
    height: 80%; 
 
    margin-top: 10px; 
 
    margin-left: 260px; 
 
} 
 

 
.MainContent { 
 
    width: 100%; 
 
    height: 80%; 
 
    background-color: yellow; 
 
}
<div class="header"> 
 
    <img src="img/epic_it.png" alt="epicit logo"> 
 
</div> 
 

 
<div class="MainContent"> 
 
    <h1> 
 
    Lorem ipsum 
 
    </h1> 
 
</div>

希望這有助於! :)

+0

非常感謝你!這解決了我的問題:) –

+0

很高興聽到這個解決方案似乎已經爲你工作。一旦您確認此解決方案解決了您的問題,請不要忘記通過單擊表決按鈕下方的灰色檢查標記解決方案爲正確的 - 這會將其從「未答覆的問題」隊列中移除,並將聲譽評爲兩個提問者和問題回答者。當然,在說,你沒有義務標記我的答案(或任何其他答案)是正確的,但它確實有助於保持事情順利進行:) –

相關問題