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
source

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

11

Utiliser flexbox c'est super simple!

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

Exemple de violon

— Sol
source

6

Utiliser le style

.child_div_1 {
    float:left
}

— amit_g
source

5

Le mieux qui fonctionne pour moi:

 .left{
   width:140px;
   float:left;
   height:100%;
 }

 .right{
   margin-left:140px;
 }

http://jsfiddle.net/jiantongc/7uVNN/

— jiantongc
source

2

float:leftPropriété utilisateur dans la classe div enfant

vérifier la structure div en détail: http://www.dzone.com/links/r/div_table.html

— Pranay Rana
source

2

Utilisation de flexbox

   #parent_div_1{
     display:flex;
     flex-wrap: wrap;
  }

— dasfdsa
source