86 votes

Comment aligner 3 divs sur la même ligne ?

Quelqu'un peut-il m'aider à résoudre ce problème car je le traite depuis longtemps maintenant...

J'essaie d'obtenir 3 divs sur la même ligne l'un à côté de l'autre, l'un des div ressemble à ceci :

 <div>  
  <h2 align="center">San Andreas: Multiplayer</h2>  
  <div align="center">
    <font size="+1">  
      <em class="heading_description">15 pence per slot</em>  
    </font>  
    <img src="http://fhers.com/images/game_servers/sa-mp.jpg" class="alignleft noTopMargin" style="width: 188px; ">  
    <a href="gfh" class="order-small">  
      <span>order</span></a>  
  </div>

et les deux autres sont les mêmes div s'il vous plaît aidez-moi à obtenir les trois div sur la même ligne une à droite une au milieu et une à gauche

43voto

Gabriel Santos Points 2962

Voir mon code

 .float-left {
    float:left;
    width:300px; // or 33% for equal width independent of parent width
}
 <div>
    <h2 align="center">San Andreas: Multiplayer</h2>
    <div align="center" class="float-left">CONTENT OF COLUMN ONE GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN TWO GOES HERE</div>
    <div align="center" class="float-left">CONTENT OF COLUMN THREE GOES HERE</div>
</div>

11voto

mikemaccana Points 7470

Réponse 2019 :

Utilisation de la grille CSS :

 .parent {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr;
}

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X