这段代码出了什么问题?
当我将float: left
添加到#text
和#text2
时,背景会消失在div后面。但当我删除float: left
时,一切看起来都不错。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style type="text/css">
#first{
width: 200px;
background-color: #345752;
}
#left_b{
background:transparent url('img/left.png');
background-position: left top;
background-repeat: repeat-y;
min-height: 30px;
}
#right_b{
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
}
#text{
float: left;
width: 50px;
height: 30px;
}
#text2{
float: left;
width: 70px;
height: 30px;
}
</style>
</head>
<body>
<div id = "first">
<div id = "left_b">
<div id = "right_b">
<div id = "text">text 1</div>
<div id = "text2">text 2</div>
</div>
</div>
</div>
</body>
</html>
答案 0 :(得分:8)
您的容器div #right_b
正在折叠,因为它的子项是浮动的。您可以使用“Clear-Fix”技术解决此问题。您可能需要查看以下Stack Overflow帖子以获得一些解决方案:
一种流行的解决方案是将overflow: hidden
添加到您的容器div:#right_b
:
#right_b {
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
overflow: hidden;
}
另一个常见问题是在关闭容器div之前添加<div style="clear: both;"> </div>
:
<div id="first">
<div id="left_b">
<div id="right_b">
<div id="text">text 1</div>
<div id="text2">text 2</div>
<div style="clear: both;"> </div>
</div>
</div>
</div>
答案 1 :(得分:0)
我认为你必须给#right_b
一个最小高度:
#right_b{
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
min-height: 30px;
}
浮动元素从普通文档流中取出,因此如果元素不包含其他“普通”元素,则此元素的高度为0
(因为它没有内容)。
答案 2 :(得分:0)
将其添加到样式表中:
.group:before,
.group:after {
content:"";
display:table;
}
.group:after {
clear:both;
}
.group {
zoom:1; /* For IE 6/7 (trigger hasLayout) */
}
将“class”类添加到“right_b”元素中,这将修复崩溃的div:
<div id = "right_b" class="group">
<div id = "text">text 1</div>
<div id = "text2">text 2</div>
</div>