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

Conteneurs de largeur fluide avec des DIV équidistants

Vous disposez d'un conteneur DIV avec une largeur fluide et vous souhaitez y placer quatre DIV récipient. Chaque DIV doit avoir une taille de 300 px x 250 px. Vous souhaitez que la case 1 flotte à gauche, la case 4 flotte à droite et les cases 2 et 3 soient espacées uniformément entre les cases 1 et 4. De plus, vous souhaitez que l'espacement soit fluide, s'adaptant à la taille de la fenêtre du navigateur.

Solution :

Pour y parvenir, utilisez ce qui suit code :

#container {
  border: 2px dashed #444;
  height: 125px;
  text-align: justify;
  -ms-text-justify: distribute-all-lines;
  text-justify: distribute-all-lines;
  /* just for demo */
  min-width: 612px;
}

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

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

.box1,
.box3 {
  background: #ccc
}

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

<div>

Cette solution utilise les techniques suivantes :

• text-align : justifier : Répartit les boîtes uniformément dans le conteneur.
• .stretch : Un élément invisible qui remplit l'espace restant, assurant même spacing.
• display:inline-block: Permet de positionner les cases en ligne et espacées à l'aide de l'alignement justifié.
• font-size: 0; line-height : 0 : Résout un problème avec IE6.

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!