CSS中添加浮动，但是背景看不见了
在父div中添加了背景图片，子div使用了浮动，但是背景图片看不见了，这事什么愿意造成的感谢！各位朋友的帮助！在还没有看到问题的答案前，我通过给父div与子div设置Z-...
在父div中添加了背景图片，子div使用了浮动，但是背景图片看不见了，这事什么愿意造成的
感谢！各位朋友的帮助！
在还没有看到问题的答案前，我通过给父div与子div设置Z-index解决的。
不知道这个方法怎么样？会不会出现其它什么问题？ 展开
感谢！各位朋友的帮助！
在还没有看到问题的答案前，我通过给父div与子div设置Z-index解决的。
不知道这个方法怎么样？会不会出现其它什么问题？ 展开
展开全部
背景图片路径错误。
<!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>jQuery模拟select控件</title>
<style type="text/css">
.header{
width:1000px;
height:86px;
background:url(../bg1/bg.png) repeat-x;
z-index:-1;
}
.logo{
float:left;
margin-top:3px;
margin-bottom:0px;
width:380px;
z-index:0;
}
.xiala{
float:right;
margin-top:-10px;
width:200px;
font-family:黑体;
margin-right:30px;
margin-left:auto;
text-align:right;
z-index:0;
}
#daohang{
float:right;
width:550px;
margin-bottom:12px;
}
#daohang li{
float:left;
}
#daohang ul{
list-style-type:none;
}
#daohang li a{
width:80px;
text-align:center;
display:block;
text-decoration:none;
border-left:1px solid #999;
margin:1px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="../bg1/bg_left_top2.png" />
</div>
<div class="xiala"><!--这部分是下拉菜单-->
<form method="post" style="width:200px; text-align:center;">
<p><label for="xiala">哈贝利日化：</label>
<select name="xiala" id="xiala">
<option value=" http://www.shhbl.cn/ " class="zonggongsi">总公司</option>
<option value=" http://www.dlhbl.cn/ " class="dlhbl">大连分公司</option>
<option value=" http://coco8558.b2b.hc360.com/ " class="bjhbl">北京分公司</option>
</select></p>
</form>
</div>
<div id="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">企业简介</a></li>
</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>jQuery模拟select控件</title>
<style type="text/css">
.header{
width:1000px;
height:86px;
background:url(../bg1/bg.png) repeat-x;
z-index:-1;
}
.logo{
float:left;
margin-top:3px;
margin-bottom:0px;
width:380px;
z-index:0;
}
.xiala{
float:right;
margin-top:-10px;
width:200px;
font-family:黑体;
margin-right:30px;
margin-left:auto;
text-align:right;
z-index:0;
}
#daohang{
float:right;
width:550px;
margin-bottom:12px;
}
#daohang li{
float:left;
}
#daohang ul{
list-style-type:none;
}
#daohang li a{
width:80px;
text-align:center;
display:block;
text-decoration:none;
border-left:1px solid #999;
margin:1px;
}
</style>
</head>
<body>
<div class="header">
<div class="logo">
<img src="../bg1/bg_left_top2.png" />
</div>
<div class="xiala"><!--这部分是下拉菜单-->
<form method="post" style="width:200px; text-align:center;">
<p><label for="xiala">哈贝利日化：</label>
<select name="xiala" id="xiala">
<option value=" http://www.shhbl.cn/ " class="zonggongsi">总公司</option>
<option value=" http://www.dlhbl.cn/ " class="dlhbl">大连分公司</option>
<option value=" http://coco8558.b2b.hc360.com/ " class="bjhbl">北京分公司</option>
</select></p>
</form>
</div>
<div id="daohang">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">企业简介</a></li>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
父级元素没有浮动，而它的内部元素浮动的话，它是没有高度的，因为它内部元素脱离的文档流，所以容器层的高度是不会被撑开的
就是浮动过后 父级元素高度自适应的问题
所以很多都是直接加上一个层来清除浮动
或者使用clearfix
/*浮动后的自适应高度*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
clearfix 给父级元素加上这个class就行
就是浮动过后 父级元素高度自适应的问题
所以很多都是直接加上一个层来清除浮动
或者使用clearfix
/*浮动后的自适应高度*/
.clearfix:after {
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
.clearfix{display:inline-block;}
/* Hide from IE Mac */
.clearfix {display:block;}
/* End hide from IE Mac */
/* end of clearfix */
clearfix 给父级元素加上这个class就行
本回答被提问者采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
子div使用了浮动后就脱离了普通文档流，于是父div的高度就成了0px ,解决办法是为其父div设置一个高度，或为其设置一个清除浮动的内容如：
<div>
<div style="float:left;width:50%;">子</div>
<p>环绕文字</p>
<div style="clear:both;"></div>
</div>
<div>
<div style="float:left;width:50%;">子</div>
<p>环绕文字</p>
<div style="clear:both;"></div>
</div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
设置子DIV的高度。。或者在浮动的DIV后面加一个<div style="clear:both"></div>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（3）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
|
广告 您可能关注的内容 |
