html - 媒体查询后，在 Safari 中无法正常工作的两个 float 之间的 Div 居中对齐。

Question

我有一个左右浮动的 div。我在中间有一个没有 float 的框，设置为在两个 float 之间居中。如果窗口太小，我想把正确的 div 放在所有东西下面。

这在 firefox 中工作正常，但在 safari 中它最初工作，但在调整大小后失败。

有什么想法吗？ http://jsfiddle.net/bzr49/

<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;}
}

Answer 1

.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;}
}

将右侧的 div 设置为 display: inline-block 和 float:left 为我修复了它。 http://jsfiddle.net/bzr49/7/