Comment obtenir ces deux divs côté-à-côte?

J'ai deux divs qui ne sont pas imbriquées l'une en dessous de l'autre. Ils sont tous les deux dans un div parent, ce parent div se répète. Donc en gros:

<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_1 et child_div_2 uns à côté des autres. Comment puis-je faire cela?

InformationsquelleAutor Justin Meltzer | 2011-03-22

67
```
#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érifier exemple de travail à http://jsfiddle.net/c6242/1/
- Il veut que les enfants div aligné à côté l'un de l'autre, pas les parents (au moins, c'était ma compréhension...)
- Vérifier la mise à jour de la réponse et le lien
- Je pense toujours que display: table-cell obtiendrez des résultats plus proche de ce qu'il veut dire (car alors ils ont la même hauteur, etc.), mais de cette façon va certainement travailler.
- table-cell n'est pas pris en charge dans IE6, IE7. float:left; est la bonne façon de le faire.
- En fait la bonne façon de le faire dans IE6,7 est avec <tr><td>, parce que toute autre option pause lorsque l'utilisateur redimensionne la fenêtre. Dans les navigateurs modernes, display: inline-block est généralement la meilleure option.
InformationsquelleAutor Hussein
106

Depuis div par défaut sont bloc éléments - ce qui signifie qu'ils vont occuper toute la largeur, essayez d'utiliser -
```
display:inline-block;
```
La div est maintenant rendu inline c'est à dire ne pas perturber les flux d'éléments, mais est toujours considéré comme un élément de bloc.

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

Voir ce tutoriel pour plus d' - http://learnlayout.com/inline-block.html. Je le recommande même aux articles précédents qui conduisent à un. (Non, je n'ai pas l'écrire)
- J'ai vraiment aimé cette solution. Mon seul problème c'est que c'est aligne le bas de deux divs au lieu d'aligner le haut. Est-il un réglage rapide pour ce trop?
- Je voudrais suggérer à l'aide de 2 wrapper divs ayant la même hauteur pour ensuite le contenu à l'intérieur d'eux semblent apparaître alignée en haut.
- Je suis d'accord. C'est beaucoup mieux que float:left, car il vous donne beaucoup plus d'options sans redéfinir l'ensemble de votre mise en page. Choses "tout le travail" de cette façon. Découvrez-le ici: jsfiddle.net/SrAQd/4
- Afin d'obtenir l'alignement vertical j'ajouterais "vertical-align: top;"
- Oui, je suis d'accord avec cdiggins. Qui devrait vous aider.
InformationsquelleAutor Robin Maben

J'ai trouvé le code ci-dessous très utile, il peut aider toute personne qui vient chercher ici

HTML:

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

InformationsquelleAutor axs

5

À l'aide de flexbox il est super simple!
```
#parent_div_1, #parent_div_2, #parent_div_3 {
    display: flex;
}
```
Violon exemple

InformationsquelleAutor Sol

Meilleur qui fonctionne pour moi:

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

 .right{
   margin-left:140px;
 }

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

InformationsquelleAutor jiantongc

3

En utilisant le style
```
.child_div_1 {
    float:left
}
```
InformationsquelleAutor amit_g
1

Utilisateur float:left des biens de l'enfant div class

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

InformationsquelleAutor Pranay Rana

À l'aide de flexbox

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

InformationsquelleAutor dasfdsa

Vous devez vous connecter pour publier un commentaire.