Html 媒体查询和浮动/断开跨距

一些文本。有些文本偶尔会浮动。

在这种情况下，如果结果窗口大于500px，则两行文本位于同一行上

当窗口的大小调整得更小时，跨度会打断线条，但再次将窗口的大小调整得更大并不会逆转该行为。换行符保留，跨距浮动在下一行上。这是正确的行为吗？有没有一种方法可以解决这个问题：一种可以让跨度再次与其他文本内联的方法

---

更新：这是Webkit（和Blink？）中的一个bug

正如@thirtydot在评论中指出的，这是一个Webkit bug，mor在这个问题中的信息：

要实现disired布局，可以执行以下操作：

HTML:

---

你会考虑改变标记中元素的顺序吗？假设你在Chrome中测试，可能类似于：你能把第一个文本也包起来吗？@你是对的，这是同一个问题。我将更新到bug跟踪器的链接。请注意，浮动一个元素会自动将其变成一个块，而不管您给同一个元素的显示值是多少。在您的情况下，

display:inline

样式应该没有效果。不一定与bug有关，但我想指出。

span {
    display: block;
}

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

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

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

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