Comment créer une mise en page fluide avec des DIV équidistants à l'aide de CSS ?

Largeur fluide avec des DIV équidistants

Pour obtenir une disposition fluide avec des DIV équidistants, l'approche suivante peut être utilisée :

CSS

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

Cela définit le texte alignement pour "justifier", ce qui entraîne une répartition uniforme du contenu sur la largeur disponible.

.box1,
.box2,
.box3,
.box4 {
  display: inline-block;
  vertical-align: top;
}

En définissant display: inline-block, les DIV se comporteront comme des éléments en ligne, s'écoulant horizontalement dans le conteneur.

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

Un élément "stretch" est ajouté pour remplir l'espace restant et pousser les DIV vers leurs positions souhaitées. Effacer la police et la hauteur de ligne est utile dans certains navigateurs.

HTML

<div>

L'élément stretch garantit que les DIV sont répartis de manière uniforme et réactive dans le conteneur de 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!