将div按从左到右的顺序向右浮动？答案

【问题标题】：Float div's to the right in left-to-right order?将div按从左到右的顺序向右浮动？
【发布时间】：2012-02-14 16:13:10
【问题描述】：

我有多个要在水平行中显示的 div。通常，我这样做的方式是简单地将它们浮动到右侧并以相反的顺序将它们放在标记中，如下所示：

<div>
  <div style="float:right">Right</div>
  <div style="float:right">Middle</div>
  <div style="float:right">Left</div>
</div>

我正在尝试完成类似的事情，将 div 向右浮动，但出于 SEO 原因，我无法在标记中颠倒它们的顺序。左边的 div 需要在代码中排在第一位。

有没有一种简单的方法可以做到这一点而无需绝对定位？

【问题讨论】：

有什么特别的原因为什么你不能把它们整理好然后再向左浮动？

标签： html css

【解决方案1】：

您可以将text-align: right 应用于容器，并使用display: inline-block 代替浮动：

<div style="text-align: right">
  <div style="display:inline-block">Left</div>
  <div style="display:inline-block">Middle</div>
  <div style="display:inline-block">Right</div>
</div>

DEMO

【讨论】：

你打败了我。我最近完成了同样的事情。
如何处理由于 HTML 中的空格字符而导致的内联块 div 之间偶尔出现的空格？您是否只是在 HTML 中将 div 卡在一起而没有空格字符？如果是这样的话，很难阅读。
@FrankstonRalphingtonIII 如果您向父元素添加一些样式，您可以摆脱那些破坏文档流的烦人空格。这是一些解决方案的链接：[link]css-tricks.com/fighting-the-space-between-inline-block-elements[link] 我个人的偏好是 font-size:0 技巧。

【解决方案2】：

对于可变高度的元素，使用 display:inline-block 可能无法按预期工作。

所以你可能想使用：

<div style="float: right">
      <div style="float:left">Left</div>
      <div style="float:left">Middle</div>
      <div style="float:left">Right</div>
</div>

请参阅：demo of both -- inline and float-float。

【讨论】：

【解决方案3】：

您可以将float: right 分配给外部 div。并且内部div的显示样式为inline-block

 <div style="float: right" >
      <div style="display:inline-block">Left</div>
      <div style="display:inline-block">Middle</div>
      <div style="display:inline-block">Right</div>
 </div>

【讨论】：

【解决方案4】：

让你的元素向左浮动。

  <div>
    <div style="float: left; position: relative; width: 200px;">Left</div> <!-- dummy width -->
    <div style="float: left; position: relative; width: 200px;">Middle</div> <!-- dummy width -->
    <div style="float: left; position: relative; width: 200px;">Right</div> <!-- dummy width -->
  </div>

此外，您需要为每个 div 指定 width。

将它们向右浮动的原因是什么？

【讨论】：

@Jakobud：有点晚了，但我认为将容器
向右浮动就可以了。