按照从左到右的顺序浮动div的权利？

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

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

我试图做一个类似的事情，浮动div的权利，但我不能扭转他们的订单在search引擎优化的原因标记。 左边的div需要先在代码中。

有没有一个简单的方法来做到这一点，而不是诉诸绝对定位的东西？

Answer 1

你可以应用一个text-align: right容器的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> 

请参阅： 内联和浮动浮动的演示 。

Answer 3

你可以给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> 

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

你把他们推到右边的理由是什么？