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

Posted 2023-02-24

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

【英文标题】：How to float two elements to the right maintaining the same order visually and semantically?

【发布时间】：2013-01-10 09:05:48

【问题描述】：

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

<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。

【参考方案1】：

常见的修复方法是：

添加辅助元素

<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 直接在下面证明了这一点）。

这些都不是正确答案。

【讨论】：

我实际上不得不反对你的表达：最糟糕的解决方案。这个解决方案与浮动的原则完全不矛盾，大多数人都使用浮动左，这更容易并且 html 将是有序的，但为什么它成为一个“最糟糕的解决方案”时 float:right ？ “使用 CSS 浮动，一个元素可以向左或向右推，允许其他元素环绕它。”而且我敢肯定，我们亲爱的提问者的计划远不止“Says Simon”，而不是将其固定为“Says Simon”，因为他知道他可以把它放在一个 div 中。这是关于浮动：div 的正确顺序。

CSS 应该用于样式元素，而不是改变内容的含义。同样的方式，辅助 HTML 元素不应添加用于样式目的。

【参考方案2】：

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

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

【讨论】：

gte IE6 的跨浏览器支持是什么？

我知道什么是条件 cmets。将我链接到它的目的是什么？

使用display: inline; display: inline-block 将是处理IEhasLayout 属性：haslayout.net/haslayout

如果你问我对 ie6+ 的显示内联块支持，你必须添加 *display: inline;缩放：1；

到目前为止，这似乎是最好的解决方案。我想不出任何负面影响。

【参考方案3】：

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

【讨论】：

理论上是一个选项，但不会赞成。负面影响太多了。最严重的是，通常这样的代码很难重用，即使在相同的布局中也是如此。此外，想想那些放大内容和响应式布局的人。忽略可重用性的含义，这可能是原型或应用程序（例如 Facebook 页面应用程序）布局的答案，其中容器尺寸在某种程度上已知不会改变。

提出了很好的观点。我没有考虑流体布局等 - 只是认为这是另一个可能的角度来解决问题。

【参考方案4】：

这里有很多使用 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/（不包括前缀）

【讨论】：

只是将此添加到我的答案中。 ： ） 好工作。关于 IE10，目前它支持旧规格（从 2009 年开始）。有一个 polyfill 增加了对所有浏览器的支持，github.com/doctyper/flexie。不幸的是，它也遵循过时的规范。

根据 IE 文档，他们遵循 2012 年初的规范。它几乎与当前草案（2012 年末）相同，但缺少一些属性（flex-shrink、flex-grow、flex -basis)，一些具有不同名称的属性（flex-pack 与 justify-content），以及一些具有不同名称的值（end 与 flex-end）。 gist.github.com/4461470