web-dev-qa-db-fra.com

Aligner horizontalement div sans flotteur

Je veux savoir s'il existe un moyen élégant d'aligner horizontalement 3 divs sans utiliser float propriété css.

HTML:

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
</div>

Je pose cette question car le parent div n'a pas la propriété float et l'ajout de float aux enfants provoque des problèmes lors du redimensionnement de la page.

htmlcsscss3alignment
15
Azincourt

Vous pouvez utiliser display:inline-block ou display:table-cell avec le contenu interne.

#parent{ display:flex; justify-content: space-between; }

JSFiddle

  • Disposition du tableau:
#parent{ display:table; width:100%; }
#parent div{ display:table-cell; }
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

  • Disposition des blocs en ligne:
#parent{ width:100%; white-space:nowrap; }
#parent div{ display:inline-block; width:33.3%;}
#first{ text-align:left; }
#second{ text-align:center; }
#third{ text-align:right; }

JSFiddle

36
potashin

Ajout à notulysses 's answer , Si l'ancien support du navigateur n'est pas un problème, vous pouvez utiliser css3 Flexible_boxes .

En appliquant display:flex les divs enfants seront alignés horizontalement (par défaut)

#parent{
 display:flex;
 justify-content:space-around;
}

en savoir plus sur flexbox @ CSSTricks

Cela évitera le problème d'espace blanc avec inline-block éléments

JSfiddle

13
T J
#parent { 
    display: table; 
}

#first, #second, #third { 
    display: table-cell; 
}
1
Ankit Agrawal

Au lieu de trouver une solution de contournement pour le flottement, vous pouvez également utiliser le correctif suivant pour vos "problèmes de redimensionnement" (du moins ce que je pense que cela est dû à):

Après avoir utilisé des flotteurs, vous devez toujours vider vos flotteurs. Vous pouvez le faire en ajoutant un <div> Supplémentaire à une classe.

<div id="parent">  
  <div id="first">Left</div>  
  <div id="second">Middle</div>  
  <div id="third">Right</div>
  <div class="clear"></div>
</div>

En CSS:

.clear{
  clear: both;
}
1
Praxis Ashelin

Utilisez le style CSS ci-dessous:

#parent div{ display: inline-block; }

Violon de travail

0
Sid

Avec le CSS ci-dessous, vous pouvez atteindre votre objectif:

#parent{
 width:140px;
    height:30px;
    border:1px solid #CCC; 
}
#first{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid red;
}
#second{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid green;
}
#third{
    width:19px;
    height : inherit;
    display:inline;
    border : 1px solid blue;
}

Violon

0
chandu