防止右浮动元素交换

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右,只是text-align: right;.然后,将每个DIV标记为display: inline-block;而不是block.根据您的具体情况,这可能会导致问题,但在很多其他情况下,它会正常工作.

如果出现问题,您可以将两个DIV粘贴在包装中,然后将其浮动到右侧,然后使用我的解决方案.然而,这种语义稍微不那么简单,但我认为它最终并不重要.由你决定!