防止右浮动元素交换

Question

似乎每当我将两个元素向右浮动时，它们就会被交换掉。左浮动元素不会发生这种情况，它似乎出现在每个浏览器中。

以下是一个例子：

CODE：

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

RENDERED：

DIV TWO DIV ONE

这不是一个重大问题，但在与同事交换代码时确实会造成混淆。有没有办法防止这种情况发生？

Answer 1

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

如果出现问题，您可以将两个DIV粘贴在包装中，然后向右浮动，然后使用我的解决方案。然而，这种语义稍微不那么简单，但我想它最终并不重要。这取决于你！

Answer 2

就像左浮动元素一样，它们尽可能向左浮动直到它们碰到另一个左浮动元素，右浮动元素将尽可能向右浮动，直到它们碰到另一个右浮动元素。这实际上是良好的，一致的行为，可能是乍看之下令人困惑。

如果你真的很疯狂，你可能会尝试用事后用Javascript交换元素......但是这会对你的非JS用户造成严重破坏，并最终将问题更加困惑于那些知道如何正确的开发人员-lolo是假设表现的。交换HTML订单真的是这里的方式，抱歉：/