如何更改背景颜色在另一个DIV内的DIV

Question

我有一个包含两个菜单的页面。 div中的第一个内容是一般主题。第二个div是针对特定主题的。我想将特定顶部div的颜色更改为不同的背景颜色。我似乎无法让它工作。

CSS：

#navigation { 
    border-top: 2px solid #808080; 
    border-bottom: 2px solid #808080; 
    background-color: yellow; 
    overflow: scroll; 
} 

#NavigationColorGreen { 
    background-color: greenyellow; 
} 

的HTML：

<div id="navigation" > 
    <a href="general-links.htm>General</a>" 
    <hr class="divider"/> 
    //* I want to change the background color of this div to green *// 
    <div id="NavigationColorGreen" > 
    <a href="specific-links.htm">Specifics</a> 
    </div> 
</div> 

Answer 1

您遇到的问题是与浮动li在你的菜单做。当一个元素使用display:float时，它将从页面流中取出。这意味着你的NavigationColorGreen div没有直接的内容，没有任何东西给它的高度，它的高度为0.

为了克服这个问题，你需要使用“clearfix”。您将其添加到包含div（NavigationColorGreen，您的情况），它强制它“清除”浮动元素，以便它包含它们。

工作例如：

#navigation li { 
 
\t float: left; 
 
\t padding: 1px 8px 1px 8px; 
 
} 
 

 
#navigation { 
 
border-top: 2px solid #808080; 
 
border-bottom: 2px solid #808080; 
 
background-color: yellow; 
 
} 
 

 
#navigation ul{ 
 
list-style:none; 
 
} 
 

 
#NavigationColorGreen { 
 
background-color: greenyellow; 
 
} 
 

 
.clearfix:after { 
 
    content: ""; 
 
    display: table; 
 
    clear: both; 
 
} 
 

 
/* This is for the example only: */ 
 
p {font-weight:bold; clear:both; padding:10px 0 0;}

<p>Without clearfix</p> 
 
<div id="navigation"> 
 
    <a href="general-links.htm">General</a> 
 
    <div id="NavigationColorGreen"> 
 
     <ul> 
 
      <li><a href="#">Link1</a></li> 
 
      <li><a href="#">Link2</a></li> 
 
     </ul> 
 
    </div> 
 
</div> 
 
<p>With clearfix</p> 
 
<div id="navigation"> 
 
    <a href="general-links.htm">General</a> 
 
    <div id="NavigationColorGreen" class="clearfix"> 
 
     <ul> 
 
      <li><a href="#">Link1</a></li> 
 
      <li><a href="#">Link2</a></li> 
 
     </ul> 
 
    </div> 
 
</div>