html - 媒体查询和 float /中断跨度

Question

span {
    display: block;
}

@media (min-width: 500px) {
    span {
        display: inline;
        float: right;
    }
}

<p>Some text. <span>Some occasionally-floated text.</span></p>

在此Fiddle ，如果结果窗口大于 500 像素，则两行文本位于同一行。

当窗口变小时，跨度会打断线条，但再次将窗口变大不会逆转该行为。换行符仍然存在，跨度 float 在下一行。 这是正确的行为吗？有没有办法绕过它:一种方法可以让 span 再次与其他文本内联？

更新:这是 Webkit(和 Blink？)中的错误 https://bugs.webkit.org/show_bug.cgi?id=53166

Answer 1

正如@thirtydot 在评论中指出的那样，这是一个 webkit 错误，这个问题中的更多信息:Webkit float and display

要实现期望的布局，您可以这样做:

FIDDLE

HTML:

<p><span class="left">Some text. </span><span class="right">Some occasionally-floated text.</span></p>

CSS:

.left{
    float:left;
}
.right {
    clear:left;
    float:left;
}

@media (min-width: 500px) {
    .right {
        float: right;
        clear:none;
    }
}