浮動div和非浮動div之間缺失的邊距

我發現當我混合浮動div和非浮動div時，未浮動的div的邊距丟失。浮動div和非浮動div之間缺失的邊距

HTML

<div class="d0 d1"> 
    Left 
</div> 
<div class="d0 d2"> 
    Right 
</div> 
<div class="d0 d3"> 
    Center 
</div>

CSS

.d0 { 
    height: 100px; 
    border: 1px solid #333; 
} 

.d1 { 
    float: left; 
    width: 100px; 
} 

.d2 { 
    float: right; 
    width: 100px; 
} 

.d3 { 
    overflow: hidden; 
    width: auto; 
    margin: 5px; 
}

看到這個小提琴（5px的利潤率在中心DIV丟失）

http://jsfiddle.net/ozrentk/f5VFc/2/

但是，如果我補充保證金浮動元素，那真的就在那裏。有人知道爲什麼會發生這種情況？

編輯我更新了小提琴，這是一個有點混亂要理解這個問題，看看利潤率應該是中鋒和左格。或者中心和權利。空無一人。

來源

2013-07-26 OzrenTkalcecKrznaric

我不確定你在問什麼。當我嘗試它時，邊距工作正常。 – JVE999

我更新了小提琴，它令人困惑 – OzrenTkalcecKrznaric

我已經增加了中心div的邊緣到'50px'只是爲了表明邊緣確實被應用：http://jsfiddle.net/f5VFc/3/ – Adrift

您遇到的問題是非浮動元素將忽略文檔流中的浮動元素。正在應用邊距，但由於非浮動的div不能識別浮動的div，因此相對於頁面的邊緣而不是浮動的div。你可以在這裏閱讀更多關於它：http://spyrestudios.com/css-in-depth-floats-positions/

來源

2013-07-26 19:06:29 Joel

它說：*「把所有的元素都放在一個容器中，或者沒有一個放在容器中是很重要的」*。那麼如何解決這個問題的時候有左固定寬度div，右固定寬度div和中心div需要佔用餘下的寬度？ – OzrenTkalcecKrznaric

在浮動元素上設置動態寬度很粗糙。它可能不是理想的解決方案，但可以按照您的方式保留代碼，並將中心div上的邊距設置爲等於浮動div的寬度+它們之間所需距離的大小。所以在這個例子中，保證金看起來像這樣：margin：0 105px; – Joel

@OzrenTkalčecKrznarić使用'display：table-cell'或冗餘精確的大小我想象。由於它是一種在元素流中「打破規則」的方式，因此「浮動」是一種尷尬的機制，對於您想象中的任何佈局問題都不能提供簡單的答案。 – millimoose

浮動div和非浮動div之間缺失的邊距

回答

相關問題