0

“包装器” 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>

小提琴链接

4

5 回答 5

1

只需添加overflow: hidden;到您的#wrapper声明块。

于 2013-11-12T19:00:49.737 回答
1

如果您希望#wrapper颜色出现在 下#leftsidecontent，您所要做的就是添加overflow: hidden到#wrapper. 当您浮动子元素时会发生这种情况。

于 2013-11-12T19:02:20.047 回答
1

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

 #wrapper
        {
            width:700px;
            margin-left:300px;
            margin-right:300px;
            background-color:#deb887;
        }
于 2013-11-12T18:59:08.480 回答
0

这是因为#leftSideContent它漂浮在#wrapper.

添加overflow: auto到#wrapper它，这样它就知道有什么东西飘出来了。

于 2013-11-12T19:02:26.830 回答
0

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

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

于 2013-11-12T18:58:44.453 回答