从左到右顺序浮动div？

Question

我有多个div想要在水平行中显示.通常,我这样做的方法是简单地将它们浮动到右边并按相反的顺序将它们放入标记中,如下所示:

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

我正在尝试完成类似的事情,将div放到右边,但由于SEO的原因,我不能在标记中改变它们的顺序.left div需要在代码中排在第一位.

有没有一种简单的方法来做到这一点,而不是绝对定位的东西？

Answer 1

您可以将a 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

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>

请参阅:两者的演示 - 内联和浮动浮动.