背景没有显示浮动div

时间:2010-04-12 16:50:56

标签: css html

这段代码出了什么问题?

当我将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>

3 个答案:

答案 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;">&nbsp;</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>

答案 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>