Chrome和Edge浮动中间图像在第一个和最后一个,这是正确的吗？

Question

似乎在微软的边缘和谷歌浏览器浮动不会正确地重新排列div,如果你有三个div漂浮在左边,页面在444和436 px之间的宽度缩放,第三个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浮动顺序错误

当页面宽度小于444px时,正确的div浮动

可能只是我认为有什么问题,但我认为firefox的行为是正确的.

Answer 1

我在这里编辑了你的小提琴：http ://jsfiddle.net/e47jckrh/5/

您没有按照问题中的建议浮动所有元素。所以我添加float: left;到编号为 3 的 div 并将所有 3 设置为display: inline-block;。使用display: table;and display: table-cell;withvertical-align: center;是一种非常古老的垂直对齐方式。

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

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