Question

我在一个div中包含了两个标题。 div背景颜色填充第一个标题但不填充第二个标题。为什么是这样？我假设在一个div中放置两个div将导致它们继承背景颜色。我之前没有遇到任何问题。谢谢。

<div id="contain">


<header id="head_1">
    <img src="images/Logos/Actlogo.png"/>
   <p> P.O. Box 4524 </br>
       Wattville </br>
       </br>
       (203) 444 - 4444 </br>
        www.Acts4Peace.com
   <p>
</header>


<!-- menu and statement -->
<header id="head_2">
   <p>Keeping Families Warm in Winter</p>


    <ul>  <!-- main menu -->
        <li> <a href="#"> Furniture </a>
            <ul> <!-- submenu -->
            <li> <a href="#"> Couches </a></li>
            <li> <a href="#"> Chairs </a></li>
            <li> <a href="#"> Tables </a></li>
            </ul>
        </li>

        <li> <a href="#"> Clothing </a>
            <ul> <!-- submenu -->
            <li> <a href="#"> Women </a></li>
            <li> <a href="#"> Men </a></li>
            <li> <a href="#"> Kids </a></li>
            </ul>
       </li>

        <li> <a href="#"> Kitchen </a> 
            <ul> <!-- submenu -->
            <li> <a href="#"> Utensils </a></li>
            <li> <a href="#"> Blenders </a></li>
            <li> <a href="#"> Baking </a></li>
            </ul>
        </li>

    </ul>

</header>

 #contain {   /* main wrapper */
    width: 1200px;
    background-color: tan;
    margin: auto;
 }


 #head_1 p {     /* mailing address floated right */
   float: right;
   text-align: right;
   font-size: 11pt;
 }


 @font-face {
    font-family: cursive;
    src: url(C:/Windows/Fonts/Cursive standard.ttf);
 }


 #head_2 p {    /*second header paragraph, business mission*/
    float: right;
    font-family: "cursive standard";
    font-size: 26pt;
 }

Answer 1

我没有使用两次标题标记，而是将两个元素放在单独的div中，只有一个。然后改变其中任何一个或两个div的背景。

＆＃13;

<div id="contain">
  
<header>

    <div id="head_1">
      <img src="images/Logos/Actlogo.png"/>
         <p> P.O. Box 4524 </br>
            Wattville </br>
            </br>
            (203) 444 - 4444 </br>
            www.Acts4Peace.com
         <p>
    </div>


<!-- menu and statement -->
<nav>
    <p>Keeping Families Warm in Winter</p>


    <ul>  <!-- main menu -->
        <li> <a href="#"> Furniture </a>
            <ul> <!-- submenu -->
            <li> <a href="#"> Couches </a></li>
            <li> <a href="#"> Chairs </a></li>
            <li> <a href="#"> Tables </a></li>
            </ul>
        </li>

        <li> <a href="#"> Clothing </a>
            <ul> <!-- submenu -->
            <li> <a href="#"> Women </a></li>
            <li> <a href="#"> Men </a></li>
            <li> <a href="#"> Kids </a></li>
            </ul>
       </li>

        <li> <a href="#"> Kitchen </a> 
            <ul> <!-- submenu -->
            <li> <a href="#"> Utensils </a></li>
            <li> <a href="#"> Blenders </a></li>
            <li> <a href="#"> Baking </a></li>
            </ul>
        </li>

    </ul>

  </nav>

</header> 

</div>

＆＃13;

 #contain {   /* main wrapper */
    width: 1200px;
    background-color: tan;
    margin: auto;
 }


 #head_1 p {     /* mailing address floated right */
   float: right;
   text-align: right;
   font-size: 11pt;
 }


 @font-face {
    font-family: cursive;
    src: url(C:/Windows/Fonts/Cursive standard.ttf);
 }


nav p {    /*second header paragraph, business mission*/
    float: right;
    font-family: "cursive standard";
    font-size: 26pt;
 }

header {
    background-color:#;
}

＆＃13;

Answer 2

虽然我无法重新创建你的问题（也许JSFiddle中的窗口不够大），但从你对Adam Ciardelli的评论来看，这似乎是一个浮点问题。您可以在overflow:hidden上设置.contain或使用clearfix：

#contain {   /* main wrapper */
  width: 1200px;
  background-color: tan;
  margin: auto;
  overflow: hidden;
}

FIDDLE

为什么背景颜色只填充div的一部分？

2 个答案: