Question

我想要在水平行中显示多个div。通常，我这样做的方法是简单地将它们浮动到右边，然后按照相反的顺序将它们放在标记中：

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

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

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

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>

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

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

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

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。

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

从左到右顺序浮动div？

4 个答案: