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

似乎在微软的边缘和谷歌浏览器浮动不会正确地重新排列div,如果你有三个div漂浮在左边,页面在444和436 px之间的宽度缩放,第三个div转到第二个div的位置而不是低于它.这个“bug”在firefox中不会发生.

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

HTML

CSS

div{
  float: left;
}

在下面,可以看到它应该如何表现

整页布局

当页面宽度超过444px时,正确的div浮动

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

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

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

最佳答案

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

你没有像你在问题中建议的那样浮动所有元素.所以我添加了float：left;到编号为3的div并将所有3设置为显示：inline-block;.并使用display：table;并显示：table-cell; with vertical-align：center;是一种非常古老的方法来获得垂直对齐的东西.

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

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

原文地址：https://www.jb51.cc/html/426182.html

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 [e-mail] 举报，一经查实，本站将立刻删除。