Html 媒体查询后，Div中心在两个浮动之间对齐，在Safari中不起作用。 我有一个左和右浮子。中间有一个盒子，没有浮动，并且设置在两个浮子之间。如果窗户太小，我想把右边的div放在所有东西下面

这在firefox中可以很好地工作，但在safari中它最初可以工作，但在调整大小后失败

有什么想法吗

将右div设置为display:inline block和float:left为我修复了它。

---

在小提琴中，当我调整它的大小时，绿色框会下降到红色和黄色框的下方。你可以发布一个屏幕截图，看看你的样子和你想要它看起来像什么吗？同样的问题似乎发生在Chrome上。向下缩放时，绿色框会下降，但在向上缩放时不会向上移动。当你重新装填时，它又恢复正常了。根据我的经验，webkit浏览器在调整其媒体查询大小时可能有点问题。别忘了，只有我们开发人员这样做是为了测试，没有真正的用户像我们一样玩他的视口大小。我不会费心编写浏览器错误的代码@AnindyaBasu是的，当您调整它的大小时，它会向下移动，但当您再次调整它的大小时，它不会向上移动。

<div class="wrapper">
<div class="left">hey</div>
<div class="middle">hey</div>
<div class="right">hey</div>

.wrapper {
    text-align: center;    
}

.left {
    float: left;
    width: 100px;
    margin-right: 16px;
    background: yellow;
}

.middle {
    display: inline-block;
    margin: 0 auto;
    width: 200px;
    background: red;
}

.right {
    clear: both;
    float: none;
    margin-left: 0;
    width: 150px;
    background: green;
}

@media screen and (min-width: 472px) {
    .middle {float: none;margin: 0 auto;}
    .right {clear: none;float: right;margin-left: 16px;}
}

.wrapper {
    text-align: center;    
}

.left {
    float: left;
    width: 100px;
    margin-right: 16px;
    background: yellow;
}

.middle {
    display: inline-block;
    margin: 0 auto;
    width: 200px;
    background: red;
}

.right {
    clear: both;
    display: inline-block;
    float: left;
    margin-left: 0;
    width: 150px;
    background: green;
}

@media screen and (min-width: 472px) {
    .middle {float: none;margin: 0 auto;}
    .right {clear: none;float: right;margin-left: 16px;}
}