web-dev-qa-db-fra.com

Comment faire cohabiter ces deux divs?

J'ai deux div qui ne sont pas imbriqués, l'un en dessous de l'autre. Ils sont tous deux dans 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 avoir chaque paire de child_div_1 et child_div_2 l'une à côté de l'autre. Comment puis-je faire ceci?

csslayouthtml
78
Justin Meltzer
#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;
}

Consultez l'exemple de travail sur http://jsfiddle.net/c6242/1/

63
Hussein

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

display:inline-block;

La div est maintenant rendue en ligne, c’est-à-dire qu’elle ne perturbe pas le flux des éléments, mais sera toujours traitée comme un élément de bloc.

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

Voir ce tutoriel pour plus d'informations - http://learnlayout.com/inline-block.html . Je recommanderais même les articles précédents qui ont précédé celui-ci. (Non, je ne l'ai pas écrit)

101
Robin Maben

J'ai trouvé le code ci-dessous très utile, cela pourrait aider tous ceux qui viennent 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>

36
axs

Le meilleur qui fonctionne pour moi:

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

 .right{
   margin-left:140px;
 }


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

4
jiantongc

En utilisant le style

.child_div_1 {
    float:left
}
3
amit_g

En utilisant flexbox c'est super simple!

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

Fiddle exemple

2
Sol

Utilisateur float:left dans la classe div enfant 

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

1
Pranay Rana

Utiliser la flexbox

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