跨度內的div不正確的樣式

Question

我想用跨度內格

DIV是用來放一個紅色水平線

<div style="background-color:red;"> 
</div> 

跨度內使用DIV把元素向右

<div style="background-color:red;"> 
<span style="float:right;"> 
ABC 
</span> 
</div> 

但水平線沒有得到紅的顏色，只有ABC顯示在正確的，事實上不存在的div風格升作用ike寬度：900px .. ....爲什麼？

Answer 1

我建議：

<div style="background-color:red; text-align:right;">ABC</div> 

否則，你需要添加overflow:auto到您的div的樣式定義，如果你想充分利用<span>在你原來的例子。

乾杯

Answer 2

添加overflow:auto到div：

<div style="background-color:red;overflow:auto;"> 
<span style="float:right;"> 
ABC 
</span> 
</div>​ 

jsFiddle example

浮動內寬度使格基本上崩潰，並添加溢出規則允許它重新獲得跨度。

Answer 3

浮動不給你任何高度。你需要跟進它clear。試試這個：

<div style="background-color:red;"> 
    <span style="float:right;"> 
    ABC 
    </span> 
    <div style="clear: both;"></div> 
</div> 

Answer 4

您需要添加屬性overflow:hidden;在你的DIV中。 下面我提到的代碼：

<div style="background-color:red; text-align:right; overflow:hidden;"> ABC </div>