[英]CSS “wrapper” div background color not appearing in 2nd 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>
只需添加overflow: hidden; 到你的#wrapper声明块。
如果你想让#wrapper颜色出现在#leftsidecontent下，你所要做的就是添加overflow: hidden到#wrapper 。 当您浮动子元素时会发生这种情况。
你没有清理你的浮动。 在#wrapper关闭之前，为某些旧HTML添加<br clear="all"/> 。 或者，使用CSS并应用overflow: auto; 到#wrapper 。
CSS方法： http ： //jsfiddle.net/GeSQ2/1/ HTML方法： http ： //jsfiddle.net/GeSQ2/2/
代码只有一个问题：我需要定义#wrapper div的高度，这是现在包装div CSS的唯一错误：
#wrapper
{
width:700px;
margin-left:300px;
margin-right:300px;
background-color:#deb887;
}
这是因为#leftSideContent浮动在#wrapper之外。
添加overflow: auto到#wrapper以便它知道有什么东西浮出来。
单击第一页的链接后如何更改第二页div的背景颜色
[英]How to change the background color of a div on 2nd page once the link from 1st page is clicked
CSS 在另一个 div 悬停时更改单独 div 的背景颜色
[英]CSS change background color of seperate div when another div is hovered
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.