防止右浮动元素交换 [英] Prevent Right Floated Elements from Swapping

问题描述

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

It seems like every time I float two elements to the right, they get swapped. This doesn't occur for left floated elements, and it seems to be in every browser.

下面是一个例子：

代码：

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

已渲染：

DIV TWO DIV ONE

这虽然不是主要问题，但在出现问题时会引起混乱与同事交换代码。有什么办法可以防止这种情况的发生？

It's not really a major issue but it does cause confusion when swapping code with coworkers. Is there any way to prevent this from happening?

推荐答案

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

Another possible option is to, instead of FLOATING right, just text-align: right;. Then, mark each DIV as display: inline-block; instead of block. Depending on your exact situation, this might cause problems, but in a lot of other cases, it'll work just fine.

如果出现问题，则可以将两者结合在一起将DIV放入包装器中，然后将其浮动到右侧，然后使用我的解决方案。但是，这有点少了语义，但是我想它最终并没有太大关系。由您决定！

If problems arise, you can stick the two DIVs in a wrapper, and float that to the right, and then use my solution. However, that's a little less semantic, but I suppose it ultimately doesn't matter that much. It's up to you!

这篇关于防止右浮动元素交换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！