浮动div后面不显示

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

来源

2010-04-12 lolalola

您的容器分区#right_b正在崩溃，因为它的子项是浮动的。您可以使用“清除修复”技术解决此问题。你可能想看看下面的堆栈溢出后的几个解决方案：

Which method of ‘clearfix’ is best?

一种流行的解决方案是增加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;">&nbsp;</div> 
     </div> 
    </div> 
</div>

来源

2010-04-12 16:57:10

我认为你必须给#right_b也最小高度：

#right_b{ 
background:transparent url('img/right.png'); 
background-position: right top; 
background-repeat: repeat-y; 
min-height: 30px; 
}

浮动元素被拿出正常的文档流，所以如果一个元素不包含其他“正常”的元素，该元素高度为0（因为它没有内容）。

来源

2010-04-12 17:01:33

添加到您的样式表：

.group:before, 
.group:after { 
    content:""; 
    display:table; 
} 
.group:after { 
    clear:both; 
} 
.group { 
    zoom:1; /* For IE 6/7 (trigger hasLayout) */ 
}

而且 “群体” 添加到你的 “right_b” 元素，这将解决倒塌的div：

<div id = "right_b" class="group"> 
    <div id = "text">text 1</div> 
    <div id = "text2">text 2</div> 
    </div>

来源

2012-05-11 06:03:47

浮动div后面不显示

回答

相关问题