Comment créer un conteneur de largeur fluide avec des DIV équidistants ?

Largeur fluide avec des DIV équidistants

Le défi est de créer un conteneur de largeur fluide avec quatre DIV équidistants. Les DIV doivent être alignés horizontalement, avec le DIV 1 flottant à gauche, le DIV 4 flottant à droite et les DIV 2 et 3 positionnés entre les deux. De plus, l'espacement doit s'ajuster dynamiquement à mesure que le navigateur est redimensionné.

Solution

Pour y parvenir, nous pouvons utiliser les propriétés CSS text-align: justifier et afficher : bloc en ligne. Voici le code :

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
}

.box1,
.box2,
.box3,
.box4 {
  width: 150px;
  height: 125px;
  vertical-align: top;
  display: inline-block;
}

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

.box1,
.box3 {
  background: #ccc
}

.box2,
.box4 {
  background: #0ff
}

Explication

• L'élément #container est défini sur text-align : justifier. Cela force le texte à s'étendre pour remplir la largeur du conteneur.
• Chaque élément .box est défini pour afficher : inline-block. Cela leur permet de se comporter comme des éléments en ligne, mais avec une largeur et une hauteur fixes.
• L'élément .stretch agit comme un espaceur entre les éléments .box. Il est défini sur width : 100 % ;, ce qui l'étire pour remplir l'espace restant.
• font-size : 0 ; et line-height : 0 corrigent un problème dans IE6.

Lorsque le navigateur est redimensionné, l'élément .stretch ajuste sa largeur pour maintenir l'espacement entre les éléments .box, ce qui donne une mise en page fluide.

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!