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>

渲染时，这将使内部元素按照“说西蒙”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

这是最糟糕的解决方案，不幸的是，最常见的解决方案（Ali Bassam comment直接证明了这一点）。

这些都不是正确答案。

Answer 3

Flexbox有很多可能性（包括视觉重新排序元素），因此您采用的方法取决于周围的内容。但是IE在版本10之前不支持它。

http://caniuse.com/#feat=flexbox

.container {
    width: 200px;
    height: 50px;
    background: #333;
    display: flex;
}

.container.a {
    justify-content: flex-end;
}

.container p {
    width: 50px;
    height: 50px;
    background: #f00;
    margin: 0;
}

.container.b .a {
    margin-left: auto;
}

<div class="container a">
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

<hr />

<div class="container b">
    <p class="c">Let's Play</p>
    <p class="a">Simon</p>
    <p class="b">Says</p>
</div>

http://jsfiddle.net/6NWmt/（不包括前缀）

Answer 4

另一种方法可能是使两个类绝对并指定它们的位置？如果您的元素是固定大小，这将相对简单。只是一个想法..

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

4 个答案: