似乎在微软的边缘和谷歌浏览器浮动不会正确地重新排列div,如果你有三个div漂浮在左边,页面在444和436 px之间的宽度缩放,第三个div转到第二个div的位置而不是低于它.这个“bug”在firefox中不会发生.
我做了一个JSFiddle来测试http://jsfiddle.net/e47jckrh/
HTML
CSS
div{
float: left;
}
在下面,可以看到它应该如何表现
整页布局
当页面宽度超过444px时,正确的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.f2er.com/html/426182.html