HTML DIV例如浮动背景问题

说，我有一个DIV 2 DIV这样HTML DIV例如浮动背景问题

<div style="width: 300px; backround-color: #000000;"> 
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div> 
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div> 
</div>

现在我的问题是，为什么我看不到我的背景黑色低于参考，如果绿格的高度为300个像素。

来源

2012-03-25 PHPSrike

Chromium 17中的No-repro，在Ubuntu 11.04上运行：http://jsfiddle.net/davidThomas/K9Qye/1/（编辑为更新链接并纠正Brian Hoover发现的拼写错误，我[最初错过]（http://jsfiddle.net/davidThomas/K9Qye）。） – 2012-03-25 14:21:37

文本流“封杀”，如果你使用float: ...;

你可以做的就是在文本流应该是在带有“clear”属性的float属性的元素之后。

你可以这样做：

<div style="width: 300px; backround-color: #000000;"> 
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div> 
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div> 
    <div style="clear: both;"></div> 
</div>

来源

2012-03-25 14:05:12

这与这个问题有什么关系？ – justanotherhobbyist 2012-03-25 14:08:05

很简单。如果您定义文本流应位于div元素之后，上面的div元素将被视为文本，并且背景将会显示。（对不起，很难用英文解释） – 2012-03-25 14:11:30

DIV不能很好地处理嵌入浮动div的高度。你可以通过几种方法解决这个问题。最简单的就是明确：在外部div结束之前的两个div。

<div style="width: 300px; background-color: #000000;"> 
    <div style="height: 300px; width: 150px; float: left; background-color: #00ff00; color: #ffffff;">This is left</div> 
    <div style="float: right; width: 150px; background-color: #ff0000; color: ##ffffff;">This is right</div> 
    <div style="clear:both;"></div> 
</div>

它还有助于拼背景色吧:)

来源

2012-03-25 14:04:51

-1

那是因为你没有定义包装div的高度。要从中看到背景，您需要使其大于内部的div。

还删除color: ##ffffff;"中的＃号之一。

这是一个jsFiddle你的问题，定义父div的高度，你会看到黑色出现在其他2个div下。

来源

2012-03-25 14:06:49 justanotherhobbyist

那是不对的。您不必为父元素定义高度以查看背景。 – 2012-03-25 14:09:12

如果孩子div中有另一种颜色是的，填充或边距可以做到这一点，但如果它们的确切大小，孩子div会阻止父div ......他的孩子div中有绿色和红色。阅读代码。 – justanotherhobbyist 2012-03-25 14:10:10

会工作得更好，因为你不必定义高度（也许它会改变，并且不会起作用，...）。在代码中，只有第一个childNode的高度为150px，另一个没有定义高度。所以孩子节点不会有确切的大小。 – 2012-03-25 14:14:08

而不是明确的，我发现我可以添加

overflow: hidden;

到包含div的CSS。

来源

2016-10-09 22:27:11 Chris9

HTML DIV例如浮动背景问题

回答

相关问题