[英]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.