html - 防止右浮动元素交换

Question

似乎每次我向右浮动两个元素时，它们都会被交换。这不会发生在左浮动元素上，而且似乎在每个浏览器中都存在。

这是一个例子:

代码:

<style type="text/css">
    .right {
        float: right;
    }
</style>
<div class="right">DIV ONE</div>
<div class="right">DIV TWO</div>

渲染:

DIV TWO DIV ONE

这并不是什么大问题，但在与同事交换代码时确实会造成混淆。有什么办法可以防止这种情况发生吗？

Answer 1

另一种可能的选择是，不是 FLOATING right，而是 text-align: right;。然后，将每个 DIV 标记为 display: inline-block; 而不是 block。根据您的具体情况，这可能会导致问题，但在很多其他情况下，它会正常工作。

如果出现问题，您可以将两个 DIV 放在包装器中，然后将其 float 到右侧，然后使用我的解决方案。然而，这有点不那么语义化，但我想它最终并不那么重要。由你决定!