Повернуть div справа влево-вправо?

У меня есть несколько div, которые я хочу отобразить в горизонтальной строке. Как правило, способ, которым я это делал, - просто поместить их вправо и поместить их в разметку в обратном порядке следующим образом:

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

Я пытаюсь выполнить аналогичную вещь, float div справа, но я не могу отменить свой порядок в разметке по причинам SEO. Левый div должен быть первым в коде.

Есть ли простой способ сделать это, не прибегая к позиционированию вещей абсолютно?

Ответы

Ответ 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

Ответ 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>

Смотрите: демо-версия - inline и 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>

Кроме того, вам нужно указать width для каждого из этих div.

Как вы рассуждаете о том, чтобы плавать вправо?