Comment mettre côte à côte ces deux divs?

110

J'ai deux div qui ne sont pas imbriqués, l'un en dessous de l'autre. Ils sont tous les deux au sein d'un div parent et ce div parent se répète. Donc essentiellement:

<div id='parent_div_1'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_2'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

<div id='parent_div_3'>
  <div class='child_div_1'></div>
  <div class='child_div_2'></div>
</div>

Je veux obtenir chaque paire de child_div_1et à child_div_2côté de l'autre. Comment puis-je faire ceci?

css layout html Justin Meltzer
la source

Réponses:

82 
#parent_div_1, #parent_div_2, #parent_div_3 {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  margin-right: 10px;
  float: left;
}
.child_div_1 {
  float: left;
  margin-right: 5px;
}

Vérifiez l'exemple de travail sur http://jsfiddle.net/c6242/1/

Hussein
la source
1
Il veut que les enfants div s'alignent les uns à côté des autres, pas les parents (du moins c'était ma compréhension ...)
ehdv
4
Je pense toujours que display: table-cellles résultats seront plus proches de ce qu'il veut dire (depuis lors, ils auront la même hauteur, etc.), mais de cette façon, cela fonctionnera certainement.
ehdv
@ehdv display: table-celln'est pas pris en charge dans IE6 IE7. float: gauche; est la bonne façon de procéder.
Hussein
En fait, la bonne façon de faire cela dans IE6,7 est avec <tr><td>, car toute autre option sera interrompue lorsque l'utilisateur redimensionnera la fenêtre. Dans les navigateurs modernes, display: inline-blockc'est généralement la meilleure option.
John Henckel
126

Puisque les div par défaut sont des blockéléments - ce qui signifie qu'ils occuperont toute la largeur disponible, essayez d'utiliser -

display:inline-block;

Le divest maintenant rendu en ligne, c'est-à-dire qu'il ne perturbe pas le flux des éléments, mais sera toujours traité comme un élément de bloc.

Je trouve cette technique plus facile que de lutter avec floats.

Pour en savoir plus, consultez ce tutoriel - http://learnlayout.com/inline-block.html . Je recommanderais même les articles précédents qui mènent à celui-là. (Non, je ne l'ai pas écrit)

Robin Maben
la source
J'ai vraiment aimé cette solution. Mon seul problème est qu'il aligne le bas des deux div au lieu d'aligner le haut. Y a-t-il un réglage rapide pour cela aussi?
Chris
Je suggérerais d'utiliser 2 wrapper de divhauteur égale pour que le contenu à l'intérieur semble aligné en haut.
Robin Maben le
2
Je suis d'accord. C'est bien mieux que float:leftparce que cela vous donne tellement plus d'options sans redéfinir toute votre mise en page. Les choses "fonctionnent simplement" de cette façon. Découvrez-le ici: jsfiddle.net/SrAQd/4
Jerry
12
Afin d'obtenir un alignement vertical, j'ajouterais "vertical-align: top;"
cdiggins
@Chris: Oui, je suis d'accord avec cdiggins. Cela devrait vous aider.
Robin Maben
44

J'ai trouvé le code ci-dessous très utile, cela pourrait aider quiconque vient chercher ici

<html>
<body>
    <div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
    <div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
    <div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>
Développer l'extrait

haches
la source
11

Utiliser flexbox c'est super simple!

#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}

Exemple de violon

Sol
la source
6

Utiliser le style

.child_div_1 {
    float:left
}
amit_g
la source
2

Utilisation de flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }
dasfdsa
la source