从左到右的顺序将浮动div向右对齐？

Question

我有多个

标签，想要在一行中水平显示。通常的方法是将它们向右浮动，并以相反的顺序放置在标记中，如下所示：

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

我想做一个类似的事情，将div浮动到右侧，但出于SEO的原因，我不能在标记中反转它们的顺序。左侧的div需要在代码中首先出现。

有没有一种简单的方法可以做到这一点，而不必采用绝对定位？

- Jake Wilson

---

有什么特别的原因，你不能将它们排序，然后向左浮动吗？ - j08691

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

演示

- Didier Ghys

---

你比我先完成了。我最近也用类似的方法完成了同样的事情。 - mWillis

关于由于HTML中的空格字符而偶尔出现在inline-block div之间的空白，应该怎么处理呢？是不是只需在HTML中将div紧密地放在一起，没有空格字符？如果是这样的话，阅读起来会很困难。 - Brian Webster

@FrankstonRalphingtonIII如果您为父级元素添加一些样式，就可以摆脱那些破坏文档流的恼人空间。这是一些解决方案的链接：[link]http://css-tricks.com/fighting-the-space-between-inline-block-elements/[link] 我个人偏好于font-size:0技巧。 - Bavell

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

请查看：内联和浮动-浮动的演示。

- Nux

Answer 3

您可以给外部 div 添加 float: right。内部 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>

- llxxff

Answer 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指定宽度。

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

- Nick Beranek

---

@Jakobud：可能有点晚了，但我认为将容器<div>向右浮动应该就可以解决问题了。 - WynandB