Comment faire flotter 3 divs côte à côte à l'aide de CSS ?

Question

Je sais comment faire flotter deux divs côte à côte, il suffit d'en faire flotter un à gauche et l'autre à droite.

Mais comment faire cela avec 3 divs ou dois-je utiliser des tableaux à cette fin ?

Answer 1

Donnez-leur juste une largeur et float: left; Voici un exemple :

<div style="width: 500px;">
 <div style="float: left; width: 200px;">Left Stuff</div>
 <div style="float: left; width: 100px;">Middle Stuff</div>
 <div style="float: left; width: 200px;">Right Stuff</div>
 <br style="clear: left;" />
</div>

Answer 2

Il me semble que vous êtes A la recherche du Saint Graal ¡!

Humour mis à part, l'article que j'ai mis en lien est un article que, selon moi, chaque développeur frontal doit lire et comprendre.

Answer 3

C'est la même chose que pour les deux divs, il suffit de faire flotter le troisième à gauche ou à droite aussi.

<style>
  .left{float:left; width:33%;}
</style>

<div class="left">...</div>
<div class="left">...</div>
<div class="left">...</div>

Answer 4

Les flotter tous à gauche

assurez-vous qu'une largeur est spécifiée pour qu'ils puissent tous tenir dans leur conteneur (soit un autre div, soit la fenêtre), sinon ils s'enrouleront.

Answer 5

<br style="clear: left;" />

ce code que quelqu'un a posté là-haut, il a fait l'affaire ! !! lorsque je le colle juste avant de fermer le DIV Container, cela permet d'éviter que tous les DIV suivants ne se chevauchent avec les DIV que j'ai créés côte à côte en haut !

<div>
<div class="left"></div>
<div class="left"></div>
...
...
<div class="left"></div>
<!--  then magic trick comes here  -->
<br style="clear: left;" />
</div>

tadaa !! :)