Question

＆＃34;包装＆＃34; div背景颜色不出现在第二个div中，而div的高度和宽度都定义为 为什么背景颜色不应用于包装器中定义的整个宽度和高度，而不应用于#leftSideContent div

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
    <title>page practice</title>
    <style>
        body
        {
            background-image: url("stripe_f4b448da7a886ae96535955b68f80e83.png");
            background-repeat: repeat;
        }
        #wrapper
        {
            width:700px;
            margin-left:300px;
            margin-right:300px;
            background-color:#deb887;
        }
 #firstAside
        {
            border:8px aquamarine solid;
            margin-top: 20px;
            margin-left: 20px;
            width:200px;
            height:375px ;

        }
        #secondAside
        {
            border:8px aquamarine solid;
            margin-top: 20px;
            margin-left: 20px;
            width:200px;
            height:100px ;

        }
nav
        {
            margin-top:10px;
            margin-left: 3px;
        }
        #leftSideContent
        {
            float: left;
            width: 200px;
            height: 700px;
        }
</style>
</head>
<body>
        <div id="wrapper">
        <header>
            <p>CSS Zen Garden</p>
        </header>
        <div id="leftSideContent">
        <aside id="firstAside">
          <b>Select A Design</b>
          <nav>
            <ul>
              <li><a href="#">JAMES KERLEY</a> <span> by </span><a href="#">ABCD</a></li>
              <li><a href="#">JAMES KERLEY</a> <span> by </span><a href="#">ABCD</a></li>
            </ul>
          </nav>
          </aside>
        <aside id="secondAside">
            <b>Archives</b>
            <nav>
            <ul>
                <li><a href="#">JAMES KERLEY</a></li>
                <li><a href="#">JAMES KERLEY</a></li>
             </ul>
            </nav>
        </aside>
</div>
          <div id="content"><p> data</p></div>
         </div>

</body>
</html>

fiddlelink

Answer 1

只需将overflow: hidden;添加到#wrapper声明区。

Answer 2

如果您希望#wrapper颜色显示在#leftsidecontent下，您只需将overflow: hidden添加到#wrapper即可。当您浮动子元素时会发生这种情况。

Answer 3

你还没有清理你的漂浮物。在<br clear="all"/>关闭之前的某处为旧HTML添加#wrapper。或者，使用CSS并将overflow: auto;应用于#wrapper。

CSS方法：http://jsfiddle.net/GeSQ2/1/ HTML方法：http://jsfiddle.net/GeSQ2/2/

Answer 4

代码只有一个问题：我需要定义#wrapper div的高度，这是唯一的错误现在包装div CSS将是：

 #wrapper
        {
            width:700px;
            margin-left:300px;
            margin-right:300px;
            background-color:#deb887;
        }

Answer 5

这是因为#leftSideContent浮动在#wrapper之外。

将overflow: auto添加到#wrapper，以便它知道有些内容浮出水面。

CSS“包装”div背景颜色没有出现在第二个div中？

5 个答案: