CSS“包装”div背景颜色没有出现在第二个div中？
[英]CSS “wrapper” div background color not appearing in 2nd div?
问题描述
"wrapper" div background color not appearing in 2nd div while height and width of both div is defined why background color is not applied in whole width and height as defined in wrapper its not applied in #leftSideContent div 
“包装器”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>
5 个解决方案
解决方案1
1 已采纳 2013-11-12 19:00:49
Just add overflow: hidden; 只需添加overflow: hidden; to your #wrapper declaration block. 到你的#wrapper声明块。
解决方案2
1 2013-11-12 19:02:20
If you want the #wrapper color to appear under #leftsidecontent , all you have to do is add overflow: hidden to #wrapper . 如果你想让#wrapper颜色出现在#leftsidecontent下，你所要做的就是添加overflow: hidden到#wrapper 。 This happens when you float a child element. 当您浮动子元素时会发生这种情况。
解决方案3
0 2013-11-12 18:58:44
You haven't cleared your float. 你没有清理你的浮动。 Add <br clear="all"/> for older HTML somewhere before #wrapper closes. 在#wrapper关闭之前，为某些旧HTML添加<br clear="all"/> 。 OR, use CSS and apply overflow: auto; 或者，使用CSS并应用overflow: auto; to #wrapper . 到#wrapper 。
CSS Method: http://jsfiddle.net/GeSQ2/1/ HTML Method: http://jsfiddle.net/GeSQ2/2/ CSS方法： http ： //jsfiddle.net/GeSQ2/1/ HTML方法： http ： //jsfiddle.net/GeSQ2/2/
解决方案4
0 2013-11-12 18:59:08
there is only one problem with code: i need to define height of #wrapper div that was the only mistake now wrapper div CSS will be : 代码只有一个问题：我需要定义#wrapper div的高度，这是现在包装div CSS的唯一错误：
#wrapper
{
width:700px;
margin-left:300px;
margin-right:300px;
background-color:#deb887;
}
解决方案5
0 2013-11-12 19:02:26
It's because #leftSideContent is floated outside the #wrapper . 这是因为#leftSideContent浮动在#wrapper之外。
Add overflow: auto to #wrapper so that it knows that there is something floating out. 添加overflow: auto到#wrapper以便它知道有什么东西浮出来。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.