2013-07-04 33 views
1

我有以下浮動的div壓低格:如何從浮動DIV

+---------------+ +-----------+ 
|    | |   | 
|    | | Div-B | 
|    | |Float:left | 
|    | |   | 
|  Div-A  | |   | 
| Float: left | +-----------+ 
|- - - - - - - -|-+-----------+ 
|    | |   | 
|  Ext  | | Div-C | 
|    | |   | 
|- - - - - - - -|-+-----------+ 
|    | 
+---------------+ 

正如你可以看到我有三個數的div那裏股利-A和DIV-B浮動到左邊。由於Div-C(沒有外部區域)沒有浮動屬性,它跳轉到Div-A右側的空白區域。因此,Div-C的左邊界應該與Div-A的右邊界相鄰。實際上,這也正在發生,即Div-C中的文本從Div-A的右邊界開始。但在Google-Chrome瀏覽器中,在開發人員工具中,我可以看到實際上Div-C的左邊框與Div-A的左邊框相鄰。 我的問題是爲什麼Google-Chrome顯示Div-C的左邊界與Div-A的左邊界相鄰?

+1

放鬆一下,在http://www.jsfiddle.net爲此做一個例子,man ... – DontVoteMeDown

回答

0

如果div-c中有足夠的文本越過div-a的底部,它將圍繞div-a的底部,然後靠近其左邊界。

+0

不,Div-C中沒有足夠的文本。它並沒有將文字環繞在Div-A的底部。其實它在網頁上運行良好。但我正在談論Google Chrome的開發者工具。在開發人員工具(如firefox中的firebug)中,它顯示了Div-C的左邊界,與Div-A的左邊界相鄰。 – stockBoi

1

這是根據本CSS2.1規範for floats正確的行爲:

由於浮子是不是在流動的,非定位塊盒之前和浮動框之後創建 垂直流動彷彿浮動沒有 存在。但是,爲了騰出浮標的邊距框 的空間,必要時縮短了浮動的 旁邊創建的當前和隨後的線框。

所以浮動不會影響正常塊的邊界,隻影響文本。該塊仍然需要容器的完全可訪問寬度,並且浮動塊與其重疊。但是,對於建立new block formatting context的塊(例如,具有display:table或overflow:hidden的塊),情況會發生變化。這些塊可能會縮短文本的寬度(並且在所有瀏覽器中都這樣做,儘管規範並不嚴格要求這樣做)。

+0

由於這個原因,我相信唯一能讓Div-C達到所需位置的方法是將其設置爲絕對位置並手動定位或使所有對象基於網格或類似物。請參閱http://jsfiddle.net/ECp9X/ –