Comment créer un conteneur de largeur fluide avec des DIV uniformément espacés ?

Largeur fluide avec des DIV uniformément espacés

Un utilisateur cherche à créer un conteneur DIV de largeur fluide avec quatre DIV enfants de dimensions égales (300px x 250px). L'exigence est que le premier DIV flotte à gauche, le dernier à droite et les deux autres soient espacés uniformément entre eux, tout en conservant la réactivité.

Solution :

Considérez les CSS et HTML suivants mise en œuvre :

#container {
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  *display: inline;
  zoom: 1;
}

.stretch {
  width: 100%;
  display: inline-block;
  font-size: 0;
  line-height: 0
}

<div>

Explication :

• Le #container DIV utilise text-align: justifié et display: propriétés de bloc en ligne pour justifier les DIV enfants.
• Le bloc en ligne est pris en charge dans les navigateurs modernes, mais pour garantir la compatibilité entre navigateurs, nous utilisons display : inline with zoom : 1 pour IE6/7.
• Dans IE6, les éléments de bloc en ligne ne sont pas correctement espacés, donc une largeur de 100 % avec font-size : 0 et line-height : 0 corrige ce problème problème.
• Un élément span avec la classe "stretch" remplit l'espace restant dans le conteneur pour distribuer les DIV uniformément.
• Les DIV enfants sont définis aux dimensions souhaitées et reçoivent des couleurs d'arrière-plan spécifiques à des fins de démonstration.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!