Html 如何将两个元素向右浮动，在视觉和语义上保持相同的顺序？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14538106/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to float two elements to the right maintaining the same order visually and semantically?
提问by Gajus
How to float two elements within a wrapper element to the right keeping the same order of the elements visually and semantically?
如何将包装元素中的两个元素向右浮动，在视觉和语义上保持元素的相同顺序？
<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>
When rendered, this will make the inner elements appear in the order of "Says Simon", http://jsbin.com/eravan/1/edit.
渲染时，这将使内部元素按照“西蒙说”的顺序出现，http://jsbin.com/eravan/1/edit。
采纳答案by Gajus
The common fixes are:
常见的修复方法是：
Adding auxiliary element
添加辅助元素
<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
http://jsbin.com/eravan/6/edit
The problem with this approach is the redundant auxiliary element itself.
这种方法的问题在于冗余辅助元素本身。
Messing with the semantics
搞乱语义
<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
http://jsbin.com/eravan/9/edit
This is the worst solution and, unfortunately, the most common as well (Ali Bassam commentdirectly below proves it).
这是最糟糕的解决方案，不幸的是，也是最常见的解决方案（下面的Ali Bassam 评论证明了这一点）。
Neither of these is the correct answer.
这两个都不是正确答案。
回答by miru87
You can also use display: inline-block;instead of floatwhile setting text-align: right;on the parent element.
您也可以在父元素上使用display: inline-block;而不是floatwhile 设置text-align: right;。
回答by cimmanon
There are lots of possibilities here with flexbox (including visually reordering elements), so the approach you would take depends on the surrounding content. However IE doesn't support it until version 10.
flexbox 有很多可能性（包括视觉上重新排序元素），因此您将采用的方法取决于周围的内容。但是 IE 直到版本 10 才支持它。
http://caniuse.com/#feat=flexbox
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/(prefixes not included)
http://jsfiddle.net/6NWmt/（不包括前缀）
回答by Mat Richardson
Another way to do this might be to make the two classes absolute and specify their location? If your elements are fixed size this would be relatively simple. Just a thought..
另一种方法可能是使这两个类成为绝对的并指定它们的位置？如果您的元素是固定大小的，这将相对简单。只是一个想法..
