两个div总是会重合在一起,是哪里出问题了?
我做的是上面那个，绿色的条总是和上面的重叠起来，正确的应该是下面那个，代码在下面，请各位帮我看看是什么问题，我是新手。<!DOCTYPEhtmlPUBLIC"-//W3C...
我做的是上面那个，绿色的条总是和上面的重叠起来，正确的应该是下面那个，代码在下面，请各位帮我看看是什么问题，我是新手。
<!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>
<link href="test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div id="menu">
<table border="0" cellspacing="5" cellpadding="0">
<tr>
<td><img src="images/icon_m5.gif" width="18" height="18" /></td>
<td><a href="#">会员登录</a></td>
<td><img src="images/icon_m4.gif" width="18" height="18" /></td>
<td><a href="#">免费注册</a></td>
<td><img src="images/icon_m3.gif" width="18" height="18" /></td>
<td><a href="#">与朋友分享</a></td>
<td><img src="images/icon_m2.gif" width="18" height="18" /></td>
<td><a href="#">意见建议</a></td>
<td><img src="images/icon_m1.gif" width="18" height="18" /></td>
<td><a href="#">帮助中心</a></td>
</tr>
</table>
</div>
<div id="nav">
<li><a href="#" >首页</a></li>
<li><a href="#">咨询</a></li>
<li><a href="#">小窝</a></li>
<li><a href="#">鹊桥</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">黄页</a></li>
</div>
<div id="search">
</div>
<div>
</body>
</html>
下面是css
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg_main.gif);
background-repeat: repeat-x;
}
body,td,th {
font-size: 12px;
color: #3C0;
}
a:link,a:visited,a:active{
color: #666;
text-decoration: none;
}
@charset "utf-8";
#top {
width: 788px;
margin-right: auto;
margin-left: auto;
}
#menu {
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 300px;
}
.main {
width: 788px;
margin-right: auto;
margin-left: auto;
}
.main_l {
float: left;
width: 523px;
}
.main_l1 {
float: left;
width: 261px;
}
.main_l2 {
float: right;
width: 261px;
}
#nav {
margin-top: 30px;
margin-left: 230px;
}
#nav li {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
display: inline;
float: left;
}
#nav li a {
font-size: 14px;
font-weight: bold;
background-image: url(images/bg_menu21.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
height: 28px;
width: 93px;
line-height: 31px;
color: #666;
text-align: center;
float: left;
}
#search {
background-image: url(images/bg_search.gif);
background-repeat: no-repeat;
height: 41px;
width: 778px;
background-position: 0px 0px;
}
#nav a:hover {
text-decoration: underline;
color: #CCC;
background-position: 0px -28px;
}
.main_r {
float: right;
width: 260px;
} 展开
<!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>
<link href="test1.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="top">
<div id="menu">
<table border="0" cellspacing="5" cellpadding="0">
<tr>
<td><img src="images/icon_m5.gif" width="18" height="18" /></td>
<td><a href="#">会员登录</a></td>
<td><img src="images/icon_m4.gif" width="18" height="18" /></td>
<td><a href="#">免费注册</a></td>
<td><img src="images/icon_m3.gif" width="18" height="18" /></td>
<td><a href="#">与朋友分享</a></td>
<td><img src="images/icon_m2.gif" width="18" height="18" /></td>
<td><a href="#">意见建议</a></td>
<td><img src="images/icon_m1.gif" width="18" height="18" /></td>
<td><a href="#">帮助中心</a></td>
</tr>
</table>
</div>
<div id="nav">
<li><a href="#" >首页</a></li>
<li><a href="#">咨询</a></li>
<li><a href="#">小窝</a></li>
<li><a href="#">鹊桥</a></li>
<li><a href="#">社区</a></li>
<li><a href="#">黄页</a></li>
</div>
<div id="search">
</div>
<div>
</body>
</html>
下面是css
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-image: url(images/bg_main.gif);
background-repeat: repeat-x;
}
body,td,th {
font-size: 12px;
color: #3C0;
}
a:link,a:visited,a:active{
color: #666;
text-decoration: none;
}
@charset "utf-8";
#top {
width: 788px;
margin-right: auto;
margin-left: auto;
}
#menu {
margin-top: 15px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 300px;
}
.main {
width: 788px;
margin-right: auto;
margin-left: auto;
}
.main_l {
float: left;
width: 523px;
}
.main_l1 {
float: left;
width: 261px;
}
.main_l2 {
float: right;
width: 261px;
}
#nav {
margin-top: 30px;
margin-left: 230px;
}
#nav li {
list-style-position: inside;
list-style-image: none;
list-style-type: none;
display: inline;
float: left;
}
#nav li a {
font-size: 14px;
font-weight: bold;
background-image: url(images/bg_menu21.gif);
background-repeat: no-repeat;
background-position: 0px 0px;
margin: 0px;
height: 28px;
width: 93px;
line-height: 31px;
color: #666;
text-align: center;
float: left;
}
#search {
background-image: url(images/bg_search.gif);
background-repeat: no-repeat;
height: 41px;
width: 778px;
background-position: 0px 0px;
}
#nav a:hover {
text-decoration: underline;
color: #CCC;
background-position: 0px -28px;
}
.main_r {
float: right;
width: 260px;
} 展开
4个回答
展开全部
1、一般div重叠是由于div的嵌套没有弄好的原因；
2、定位没有设置好，（让div靠什么浮动好像是foalt属性，可以设置一下靠左或者靠右浮动）有的时候没有在里面加上内容，没有设置宽度和高度也会照成div重叠；
基本来说，就这二种原因。
2、定位没有设置好，（让div靠什么浮动好像是foalt属性，可以设置一下靠左或者靠右浮动）有的时候没有在里面加上内容，没有设置宽度和高度也会照成div重叠；
基本来说，就这二种原因。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你这个明显是浮动没清，给下面绿色的DIV加个clear:both；
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
#nav {
margin-top: 30px;
margin-left: 230px;
height:28px;
}
原因是，id=nav的div里面的所有内容，都被浮动了，其高度默认为0，下方的search div 就会直接跟上，从上一个div的高度处开始，看上去就像重合了。
给一个高度即可。
margin-top: 30px;
margin-left: 230px;
height:28px;
}
原因是，id=nav的div里面的所有内容，都被浮动了，其高度默认为0，下方的search div 就会直接跟上，从上一个div的高度处开始，看上去就像重合了。
给一个高度即可。
本回答被提问者和网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
注意清除浮动
<div id="nav">
......
<li><a href="#">黄页</a></li>
<div style="clear:both;"></div> //注意这段是清浮动的
</div>
<div id="nav">
......
<li><a href="#">黄页</a></li>
<div style="clear:both;"></div> //注意这段是清浮动的
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（2）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
