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

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

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

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