浮动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之间缺失的边距

回答

相关问题