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例如浮動背景問題

回答

相關問題