为什么子div块套在父div块内，不能显示负div块的背景呢？
子div块category套在，父div块container内，而父div块container的背景色是白色的，为什么子div块category超出了父div块呢？希望高...
子div块category套在，父div块container内，而父div块container的背景色是白色的，为什么子div块category超出了父div块呢？希望高手帮忙看看代码，并作一下解释。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-color: #e0e3d8;
margin-top: 0px;
}
#container {
width: 1003px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFF;
}
#top {
height: 102px;
width: 1003px;
padding-top: 6px;
padding-bottom: 8px;
}
#logo {
height: 31px;
width: 275px;
margin-top: 28px;
margin-left: 16px;
float: left;
margin-bottom: 10px;
}
#top_search {
float: right;
height: 61px;
width: 310px;
margin-bottom: 10px;
}
#menu {
height: 27px;
width: 1003px;
clear: both;
background-image: url(images/memu_bg.jpg);
background-repeat: repeat-x;
}
#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
height: 27px;
}
#menu ul li{
text-align:center;
width:120px;
display:block;
float:left;
padding-top: 4px;
}
#middle {
height: 190px;
width: 1003px;
}
#left {
height: 190px;
width: 230px;
float: left;
}
#right {
height: 190px;
width: 763px;
float: right;
}
#login {
background-color: #f3f1f2;
height: 146px;
width: 230px;
margin-bottom: 4px;
}
#message {
background-color: #f3f1f2;
height: 40px;
width: 230px;
}
#category {
height: 375px;
width: 244px;
margin-right: 12px;
float: left;
clear:both
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="logo"><img src="images/logo.jpg" width="275" height="31" alt="shine logo" longdesc="http://www.shininggroups.com" /></div> <div id="top_search"><img src="images/top_search.jpg" width="310" height="61" /></div>
<div id="menu">
<ul>
<li>Home</li>
<li>About Shine</li>
<li>Products</li>
<li>Quality Guarantee</li>
<li>Feedback</li>
<li>Contact Us</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">
<div id="login">此处显示 id "login" 的内容</div>
<div id="message">此处显示 id "login" 的内容</div>
</div>
<div id="right"><img src="images/flash.jpg" width="763" height="190" /></div>
</div>
<div id="category">uu</div>
</div>
</body>
</html> 展开
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-color: #e0e3d8;
margin-top: 0px;
}
#container {
width: 1003px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFF;
}
#top {
height: 102px;
width: 1003px;
padding-top: 6px;
padding-bottom: 8px;
}
#logo {
height: 31px;
width: 275px;
margin-top: 28px;
margin-left: 16px;
float: left;
margin-bottom: 10px;
}
#top_search {
float: right;
height: 61px;
width: 310px;
margin-bottom: 10px;
}
#menu {
height: 27px;
width: 1003px;
clear: both;
background-image: url(images/memu_bg.jpg);
background-repeat: repeat-x;
}
#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
height: 27px;
}
#menu ul li{
text-align:center;
width:120px;
display:block;
float:left;
padding-top: 4px;
}
#middle {
height: 190px;
width: 1003px;
}
#left {
height: 190px;
width: 230px;
float: left;
}
#right {
height: 190px;
width: 763px;
float: right;
}
#login {
background-color: #f3f1f2;
height: 146px;
width: 230px;
margin-bottom: 4px;
}
#message {
background-color: #f3f1f2;
height: 40px;
width: 230px;
}
#category {
height: 375px;
width: 244px;
margin-right: 12px;
float: left;
clear:both
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="logo"><img src="images/logo.jpg" width="275" height="31" alt="shine logo" longdesc="http://www.shininggroups.com" /></div> <div id="top_search"><img src="images/top_search.jpg" width="310" height="61" /></div>
<div id="menu">
<ul>
<li>Home</li>
<li>About Shine</li>
<li>Products</li>
<li>Quality Guarantee</li>
<li>Feedback</li>
<li>Contact Us</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">
<div id="login">此处显示 id "login" 的内容</div>
<div id="message">此处显示 id "login" 的内容</div>
</div>
<div id="right"><img src="images/flash.jpg" width="763" height="190" /></div>
</div>
<div id="category">uu</div>
</div>
</body>
</html> 展开
4个回答
展开全部
<!-------------------- 左右浮动导致左右两块脱离的标准dom流，在后面加个空div清除一下浮动就oK了--------------------------------------------->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-color: #e0e3d8;
margin-top: 0px;
}
#container {
width: 1003px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFF;
}
#top {
height: 102px;
width: 1003px;
padding-top: 6px;
padding-bottom: 8px;
}
#logo {
height: 31px;
width: 275px;
margin-top: 28px;
margin-left: 16px;
float: left;
margin-bottom: 10px;
}
#top_search {
float: right;
height: 61px;
width: 310px;
margin-bottom: 10px;
}
#menu {
height: 27px;
width: 1003px;
clear: both;
background-image: url(images/memu_bg.jpg);
background-repeat: repeat-x;
}
#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
height: 27px;
}
#menu ul li{
text-align:center;
width:120px;
display:block;
float:left;
padding-top: 4px;
}
#middle {
height: 190px;
width: 1003px;
}
#left {
height: 190px;
width: 230px;
float: left;
}
#right {
height: 190px;
width: 763px;
float: right;
}
#login {
background-color: #f3f1f2;
height: 146px;
width: 230px;
margin-bottom: 4px;
}
#message {
background-color: #f3f1f2;
height: 40px;
width: 230px;
}
#category {
height: 375px;
width: 244px;
margin-right: 12px;
float: left;
clear:both
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="logo"><img src="images/logo.jpg" width="275" height="31" alt="shine logo" longdesc="http://www.shininggroups.com" /></div> <div id="top_search"><img src="images/top_search.jpg" width="310" height="61" /></div>
<div id="menu">
<ul>
<li>Home</li>
<li>About Shine</li>
<li>Products</li>
<li>Quality Guarantee</li>
<li>Feedback</li>
<li>Contact Us</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">
<div id="login">此处显示 id "login" 的内容</div>
<div id="message">此处显示 id "login" 的内容</div>
</div>
<div id="right"><img src="images/flash.jpg" width="763" height="190" /></div>
</div>
<div id="category"><a href="http://hi.baidu.com/zhidong2006" target="_blank">靖儿</a></div>
<!-------------------- 左右浮动导致左右两块脱离的标准dom流，在后面加个空div清除一下浮动就oK了--------------------------------------------->
<div style="clear:both;"></div>
</div>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
<!--
body {
background-color: #e0e3d8;
margin-top: 0px;
}
#container {
width: 1003px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #FFF;
}
#top {
height: 102px;
width: 1003px;
padding-top: 6px;
padding-bottom: 8px;
}
#logo {
height: 31px;
width: 275px;
margin-top: 28px;
margin-left: 16px;
float: left;
margin-bottom: 10px;
}
#top_search {
float: right;
height: 61px;
width: 310px;
margin-bottom: 10px;
}
#menu {
height: 27px;
width: 1003px;
clear: both;
background-image: url(images/memu_bg.jpg);
background-repeat: repeat-x;
}
#menu ul{
list-style-type:none;
padding:0px;
margin:0px;
height: 27px;
}
#menu ul li{
text-align:center;
width:120px;
display:block;
float:left;
padding-top: 4px;
}
#middle {
height: 190px;
width: 1003px;
}
#left {
height: 190px;
width: 230px;
float: left;
}
#right {
height: 190px;
width: 763px;
float: right;
}
#login {
background-color: #f3f1f2;
height: 146px;
width: 230px;
margin-bottom: 4px;
}
#message {
background-color: #f3f1f2;
height: 40px;
width: 230px;
}
#category {
height: 375px;
width: 244px;
margin-right: 12px;
float: left;
clear:both
}
-->
</style>
</head>
<body>
<div id="container">
<div id="top">
<div id="logo"><img src="images/logo.jpg" width="275" height="31" alt="shine logo" longdesc="http://www.shininggroups.com" /></div> <div id="top_search"><img src="images/top_search.jpg" width="310" height="61" /></div>
<div id="menu">
<ul>
<li>Home</li>
<li>About Shine</li>
<li>Products</li>
<li>Quality Guarantee</li>
<li>Feedback</li>
<li>Contact Us</li>
<li>Sitemap</li>
</ul>
</div>
</div>
<div id="middle">
<div id="left">
<div id="login">此处显示 id "login" 的内容</div>
<div id="message">此处显示 id "login" 的内容</div>
</div>
<div id="right"><img src="images/flash.jpg" width="763" height="190" /></div>
</div>
<div id="category"><a href="http://hi.baidu.com/zhidong2006" target="_blank">靖儿</a></div>
<!-------------------- 左右浮动导致左右两块脱离的标准dom流，在后面加个空div清除一下浮动就oK了--------------------------------------------->
<div style="clear:both;"></div>
</div>
</body>
</html>
参考资料： http://hi.baidu.com/zhidong2006
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
子div不要有背景或背景颜色
你的代码内不要定义太多的 id 哦 定义样式 尽量用class
你的代码内不要定义太多的 id 哦 定义样式 尽量用class
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
首先父div要有背景，子div不要有背景或背景颜色，这样就能显示父div的背景颜色
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
我把你的代码除了你说的那2个DIV 其他的背景颜色都去了 给父DIV背景加了RED颜色；"category"DIV 加了blue颜色 并没有发现你说的问题，整个背景为红色，"category"为蓝色你可以HI我说清楚点。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
