html - Chrome 和 Edge float 中间图像在下面的第一个和最后一个，这是正确的吗？

Question

似乎在 Microsoft 的边缘和谷歌浏览器中， float 不会正确地重新排列 div，如果你有三个向左浮动的 div，并且页面的宽度在 444 到 436 像素之间缩放，第三个 div 会转到第二个 div位置而不是低于它。这个“错误”不会出现在 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 float

当页面宽度在 444 到 436 像素之间时，div float 顺序错误

当页面宽度小于444px时修正div float

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

Answer 1

我在这里编辑了你的 fiddle :http://jsfiddle.net/e47jckrh/5/

您没有按照问题中的建议 float 所有元素。所以我添加了 float: left;到编号为 3 的 div，并将所有 3 设置为 display: inline-block; .并使用 display: table;和 display: table-cell;与 vertical-align: center;是一种非常古老的方式来让一些东西垂直对齐。

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

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