如何将两个元素向右浮动,在视觉和语义上保持相同的顺序？

Question

如何将一个包装元素中的两个元素浮动到右边,在视觉和语义上保持元素的相同顺序？

<style>
.container { widht: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

渲染时,这将使内部元素按"Says Simon",http://jsbin.com/eravan/1/edit的顺序显示.

Answer 1

您也可以使用display: inline-block;而不是在父元素上float设置text-align: right;.

http://jsbin.com/eravan/10/edit

Answer 2

常见的修复方法是：

添加辅助元素

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: left; margin: 0; }
.container .aux { float: right; }
</style>
<div class="container">
    <div class="aux">
        <p class="a">Simon</p>
        <p class="b">Says</p>
    </div>
</div>

http://jsbin.com/eravan/6/edit

这种方法的问题是冗余辅助元件本身。

混淆语义

<style>
.container { width: 200px; height: 50px; background: #333; }
.container p { width: 50px; height: 50px; background: #f00; float: right; margin: 0; }
</style>
<div class="container">
    <p class="b">Says</p>
    <p class="a">Simon</p>
</div>

http://jsbin.com/eravan/9/edit

这是最糟糕的解决方案，但不幸的是，也是最常见的解决方案（下面直接说的阿里·巴萨姆评论证明了这一点）。

这些都不是正确的答案。