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 : [[LEFT][CENTER][RIGHT]] La largeur du div conteneur est de 100 % (aucune largeur n'est définie), et après avoir redimensionné le conteneur, le div du milieu Il doit rester en position médiane. J'ai donc défini : #container{width:100%;}#left{float:left;width:100px;}#right{float:right;width:100px;}#center{mar

P粉291886842 · Answer

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

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 :

Faible quantité de code et très efficace
Le centrage vertical et horizontal est facile
Les colonnes de contour sont très simples
Plusieurs options pour aligner les éléments flexibles
Réactif
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.

P粉029057928 · Answer

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

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中的最后加入这段代码：

，它会使#container的高度垂直延伸，以容纳两侧的浮动内容，而不仅仅是从#center pour éviter que le contenu des deux côtés ne déborde vers le bas.