Comment puis-je créer une mise en page avec des éléments de taille égale en utilisant CSS ?

Créer une mise en page avec des éléments de taille égale à l'aide de CSS

L'objectif est d'obtenir une mise en page où chaque élément a la même largeur que le plus large élément, quel que soit son contenu. Cette mise en page peut comporter plusieurs lignes et envelopper les éléments en conséquence.

Utilisation de JavaScript

Comme le démontre l'exemple fourni, JavaScript peut facilement accomplir cette tâche en calculant la largeur maximale entre les éléments, puis en attribuant cette largeur à tous les éléments.

Obtenir la même mise en page avec CSS

Il est également possible de réaliser cette mise en page en utilisant du CSS pur, sans avoir besoin de JavaScript. Voici comment :

.list-container {
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
}

.list {
  display: flex;
  flex-direction: column;
}

.list-item {
  text-transform: capitalize;
  background-color: rgb(200, 30, 40);
  font-size: 1.3em;
  text-align: left;
  padding: 10px;
  margin: 1px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: flex-start;
}

Ce CSS applique les styles suivants :

• Le .list-container agit comme le conteneur qui encapsule la liste.
• Le .list-container agit comme le conteneur qui encapsule la liste.
• Le . list est responsable de l'affichage des éléments verticalement.

Le .list-item applique des styles à chaque individu. item.

En définissant la propriété flex-wrap pour envelopper et en spécifiant le contenu justifié comme flex-start dans .list-item, nous garantissons que les éléments seront renvoyés vers de nouvelles lignes si nécessaire, tandis que maintenant leur justification jusqu'au début de la ligne.

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!