Chrome 和边缘浮动中间图片在第一个和最后一个下面，这是正确的吗？

Question

似乎在 Microsoft 的边缘和 google chrome 中，如果您有三个 div 向左浮动并且页面的宽度在 444 到 436 像素之间缩放第三个 div 转到第二个 div 的位置而不是低于它。这 "bug" 不会出现在 firefox 中。

我做了一个JSFiddle来测试http://jsfiddle.net/e47jckrh/

HTML

<div id="d1">
    <p>1</p>
</div>
<div id="d2">
    <p>2</p>
</div>
<div id="d3">
    <p>3</p>    
</div>

CSS

div{
  float: left;
}

下面是它应该如何表现的直观表示

整页布局

当页面宽度超过 444px 时更正 div 浮动

页面宽度在 444 和 436px 之间时 div 浮动顺序错误

纠正div页面宽度小于444px时的浮动

可能只有我认为有问题，但我认为 firefox 的行为是正确的。

Answer 1

该行为是由margin-right引起的。

当 div 2 达到其容器右限制时，它会溢出。在这种情况下，您可以通过 margin-right 来控制他的限额。但是 margin-right 仅在存在后续元素时才有效（其计算基于后续元素）。在这种情况下 div 3.

在新行溢出后，div 3 占据了它的位置。但在这种情况下，margin-right 没有任何效果，因为它是此流程中的最后一个元素。

编辑：我刚刚意识到您并没有浮动所有元素，我不知道这是否是您最初的想法。如果是我不会删除这个答案。

Answer 2

好的。所以 #d3 根本不应该在右侧，因为它没有浮动，但是你使用了 display:table。由于某种原因，这使它具有与其他两个 div 一起浮动的效果。

因为它使用 display: table #d3 的页边距超出了页面但不算作 "not fitting" 并且不要强制它到下一行。

#d2 是浮动的，所以它的边距确实会影响它。因此，在小范围内，您遇到的 #d1 + #d2 不适合，因为它们的边距会导致整体更大的尺寸宽度，但 #d1 + #d3 会因为#d3 不受其右侧边距的影响，使组合的整体宽度更小。

简单的解决方案是也浮动 #d3：

#d3 {
    background-color: #ede4ad;
    border: 3px dotted #6e5b3c;
    clear: right;
    float: left;
}

Answer 3

我在此处编辑了您的 fiddle：http://jsfiddle.net/e47jckrh/5/

您没有按照问题中的建议浮动所有元素。所以我在编号为3的div中添加了float: left;，并将3全部设置为display: inline-block;。将 display: table; 和 display: table-cell; 与 vertical-align: center; 一起使用是一种真正的旧方法来使某些内容垂直对齐。

这 3 行适用于大多数情况：

position: relative;
top: 50%;
transform: translateY(-50%);

Chrome 和边缘浮动中间图片在第一个和最后一个下面，这是正确的吗？

Chrome and Edge floating middle image below first and last, is this correct?

html

css

google-chrome

microsoft-edge