Faire flotter les div vers la droite dans l'ordre de gauche à droite ?

Question

J'ai plusieurs div que je veux afficher dans une rangée horizontale. Normalement, je le ferais simplement en les faisant flotter vers la droite et en les mettant dans le balisage dans l'ordre inverse, comme suit :

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

J'essaie d'accomplir une chose similaire, en flottant les div vers la droite, mais je ne peux pas inverser leur ordre dans le balisage pour des raisons de référencement. Le div de gauche doit être le premier dans le code.

Existe-t-il un moyen simple de le faire sans recourir à un positionnement absolu ?

Answer 1

Vous pouvez appliquer un text-align: right au conteneur et un display: inline-block à la place du flottant :

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

DÉMO

Answer 2

L'utilisation de display:inline-block peut ne pas fonctionner comme prévu avec des éléments de hauteur variable.

Vous pouvez donc utiliser :

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

Voir : démo des deux -- inline et float-float .

Answer 3

Vous pouvez donner float: right au div externe. Et le style d'affichage du div interne est 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

Faites flotter vos éléments vers la gauche.

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

De plus, vous devrez spécifier le width pour chacun de ces div.

Quel est votre raisonnement pour les faire flotter vers la droite ?