Comment aligner trois divs (gauche/centre/droite) en un seul div ?

Question

Je souhaite aligner 3 divs à l'intérieur d'un div conteneur, comme ceci :

[[GAUCHE] [CENTRE] [DROITE]]

La largeur du div du conteneur est de 100 % (aucune largeur n'est définie) et le div du milieu doit rester au milieu après le redimensionnement du conteneur.

J'ai donc défini :

<code>#container{width:100%;}
#gauche{float:gauche;largeur:100px;}
#right{float:right;width:100px;}
#center{margin:0 auto;width:100px;}
</code>

Mais le résultat est devenu :

[[LEFT] [CENTER] ]
                              [DROITE]

Des suggestions ?

Answer 1

Alignez trois divs horizontalement à l'aide de Flexbox

Il s'agit d'une manière CSS3 d'aligner horizontalement un div dans un autre div.

#container {
  display: flex;                  /* 建立flex容器 */
  flex-direction: row;            /* 默认值；可以省略 */
  flex-wrap: nowrap;              /* 默认值；可以省略 */
  justify-content: space-between; /* 从默认值（flex-start）切换 */
  background-color: lightyellow;
}
#container > div {
  width: 100px;
  height: 100px;
  border: 2px dashed red;
}

<div id="container">
  <div></div>
  <div></div>
  <div></div>
</div>

jsFiddle

L'attribut

justify-content a cinq valeurs :

• flex-start (par défaut)
• extrémité flexible
• centre
• espace-entre
• espace autour

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

---

Avantages de la flexbox :

1. Faible quantité de code et très efficace
2. Le centrage vertical et horizontal est facile
3. Les colonnes de contour sont très simples
4. Plusieurs options pour aligner les éléments flexibles
5. Réactif
6. Contrairement aux flotteurs et aux tables, les flotteurs et les tables ont des capacités de mise en page limitées car ils ne sont jamais utilisés pour créer des mises en page. Flexbox est une technologie moderne (CSS3) offrant un large éventail d'options.

---

En savoir plus sur flexbox :

• Comment aligner les éléments Flex
• Utiliser CSS flexbox ~ MDN
• Le guide complet de Flexbox ~ CSS-Tricks
• Qu'est-ce que Flexbox ? ! ~ Tutoriel vidéo YouTube

---

Prise en charge des navigateurs : 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 le préfixe du fournisseur. Pour ajouter rapidement un préfixe, utilisez Autoprefixer. Voir cette réponse pour plus de détails.

Answer 2

À l'aide de ce CSS, placez votre div comme suit (float en premier) :

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

PS : Vous pouvez également faire flotter d'abord la droite, puis la gauche, puis le centre. Il est important que le contenu flottant vienne avant la section centrale « principale ».

Remarque : Habituellement, vous souhaiterez le positionner à la hauteur de #container中的最后加入这段代码：<div style="clear:both;"></div>，它会使#container的高度垂直延伸，以容纳两侧的浮动内容，而不仅仅是从#center pour éviter que le contenu des deux côtés ne déborde vers le bas.