Comment aligner 3 divs (gauche/centre/droite) dans une autre div?

Je veux avoir 3 divs alignés à l'intérieur d'un conteneur div, quelque chose comme ceci: 

[[LEFT]       [CENTER]        [RIGHT]]

Container div est 100% Large (pas de largeur définie), et center div doit rester au centre après le redimensionnement du conteneur.

Donc j'ai mis: 

#container{width:100%;}
#left{float:left;width:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}

, Mais il devient:

[[LEFT]       [CENTER]              ]
                              [RIGHT]

Des conseils?

335
demandé sur Michael_B 0000-00-00 00:00:00

5 réponses

Avec ce CSS, mettez vos divs comme ceci (flotte en premier): 

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
  <div id="center"></div>
</div>

P. S. Vous pouvez également flotter à droite, puis à gauche, puis centre. L'important est que les flotteurs viennent avant la section centrale "principale".

P. P. S. vous voulez souvent last inside #container cet extrait: <div style="clear:both;"></div> qui s'étendra #container verticalement pour contenir les deux flotteurs latéraux au lieu de prendre sa hauteur uniquement à partir de #center et éventuellement permettre aux côtés de dépasser le fond.

324
répondu dkamins 2013-01-13 04:23:30

Si vous ne voulez pas changer votre structure HTML, vous pouvez également le faire en ajoutant text-align: center; à l'élément wrapper et un display: inline-block; à l'élément centré.

#container {
    width:100%;
    text-align:center;
}

#left {
    float:left;
    width:100px;
}

#center {
    display: inline-block;
    margin:0 auto;
    width:100px;
}

#right {
    float:right;
    width:100px;
}

Démo en direct: http://jsfiddle.net/CH9K8/

112
répondu fruechtemuesli 2013-01-11 00:52:29

Aligner Trois Divs Horizontalement À L'Aide De Flexbox

Voici une méthode CSS3 pour aligner les Div horizontalement dans un autre div.

#container {
  display: flex;                  /* establish flex container */
  flex-direction: row;            /* default value; can be omitted */
  flex-wrap: nowrap;              /* default value; can be omitted */
  justify-content: space-between; /* switched from default (flex-start, see below) */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}
<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

JsFiddle

La propriété justify-content prend cinq valeurs:

  • flex-start (par défaut)
  • flex-end
  • center
  • space-between
  • space-around

Dans tous les cas, les trois div sont sur la même ligne. Pour une description de chaque valeur voir: https://stackoverflow.com/a/33856609/3597276

les Avantages de flexbox:

  1. code minimal, très efficace
  2. centrage, à la fois verticalement et horizontalement, est simple et facile
  3. les colonnes de hauteur égale sont simples et faciles
  4. plusieurs options pour aligner les éléments flexibles
  5. c'est réactif
  6. contrairement aux flotteurs et aux tables, qui offrent une capacité de mise en page limitée car ils n'ont jamais été destinés à des mises en page de construction, flexbox est une technique moderne (CSS3) avec un large éventail d'options.

Pour en savoir plus sur flexbox visite:

Navigateur appui: Flexbox est pris en charge par tous les principaux navigateurs, sauf IE . Certaines versions récentes du navigateur, telles que Safari 8 et IE10, nécessitent préfixes fournisseur . Pour un moyen rapide d'ajouter des préfixes, utilisez Autoprefixer . Plus de détails dans cette réponse.

88
répondu Michael_B 2017-05-23 11:47:28

La propriété Float n'est pas utilisée pour aligner le texte.

Cette propriété est utilisée pour ajouter un élément à droite, à gauche ou au centre. 

div > div { border: 1px solid black;}
<html>
     <div>
         <div style="float:left">First</div>
         <div style="float:left">Second</div>
         <div style="float:left">Third</div>

         <div style="float:right">First</div>
         <div style="float:right">Second</div>
         <div style="float:right">Third</div>
     </div>
</html>

Pour float:left sortie sera [First][second][Third]

Pour float:right sortie sera [Third][Second][First]

Cela signifie que la propriété float => left ajoutera votre élément suivant à gauche du précédent, même cas avec right

Vous devez également considérer la largeur de l'élément parent, si la somme des largeurs des éléments enfants dépasse la largeur de l'élément parent alors l'élément suivant sera ajouté à la prochaine ligne

 <html>
     <div style="width:100%">
       <div style="float:left;width:50%">First</div>
       <div style="float:left;width:50%">Second</div>
       <div style="float:left;width:50%">Third</div>
     </div>
</html>

[Premier] [Deuxième]

[Troisième]

Vous devez donc considérer tous ces aspects pour obtenir le résultat parfait

19
répondu Rajiv Pingale 2018-09-27 14:15:31

J'aime mes barres serrées et dynamiques. C'est pour CSS 3 & HTML 5

    12
    répondu