背景不显示在浮动div [英] Background not showing behind floating divs
问题描述
这段代码有什么问题？
当我添加 float：left #text 和＃text2 。但是当我删除 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>
您的容器div #right_b 是折叠，因为它的孩子是漂浮的。你可以用清除 - 修复技术来解决这个问题。您可能想查看以下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 style =clear：both;>& nbsp;< / div> 关闭容器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;>& nbsp;< / div>
< / div>
< / div>
< / div>
what's wrong with this code?
The background disappears behind the divs when I add float: left to #text and #text2. But when I remove the float: left, everything looks good.
<!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>
You container div #right_b is collapsing because its children are floating. You can fix this with the "Clear-Fix" technique. You may want to check out the following Stack Overflow post for a few solutions:
One popular solution is to add overflow: hidden to your container div: #right_b:
#right_b {
background:transparent url('img/right.png');
background-position: right top;
background-repeat: repeat-y;
overflow: hidden;
}
Another common one is to add a <div style="clear: both;"> </div> before closing your container 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>
这篇关于背景不显示在浮动div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
