3

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

这是一个例子：

代码：

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

渲染：

DIV TWO DIV ONE

这不是一个真正的主要问题，但在与同事交换代码时确实会引起混乱。有什么办法可以防止这种情况发生吗？

4

2 回答 2

6

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

如果出现问题，您可以将两个 DIV 粘贴在一个包装器中，然后将其浮动到右侧，然后使用我的解决方案。然而，这在语义上有点少，但我认为它最终并没有那么重要。由你决定！

于 2012-06-28T17:06:11.083 回答
1

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

如果你真的很疯狂，你可能会尝试在事后用 Javascript 交换元素……但这会对你的非 JS 用户造成严重破坏，并最终使这个问题与知道如何正确浮动的开发人员更加混淆。应该表现的。交换 HTML 顺序确实是这里的方法，对不起：/

于 2012-06-28T16:53:49.130 回答