2017-05-29 87 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

很高兴听到这个解决方案似乎已经为你工作。一旦您确认此解决方案解决了您的问题,请不要忘记通过单击表决按钮下方的灰色检查标记解决方案为正确的 - 这会将其从“未答复的问题”队列中移除,并将声誉评为两个提问者和问题回答者。当然,在说,你没有义务标记我的答案(或任何其他答案)是正确的,但它确实有助于保持事情顺利进行:) –

相关问题