Comment donner à tous les éléments la même largeur que le plus large en CSS sans JavaScript ?

Comment donner à chaque élément la même largeur que l'élément le plus large à l'aide de CSS

Dans certains scénarios, il devient nécessaire de s'assurer que tous les éléments dans une mise en page ont la même largeur que l'élément le plus large. Ceci peut être réalisé en CSS sans recourir à JavaScript, contrairement à l'exemple populaire qui utilise JavaScript pour obtenir cet effet.

L'essence de cette approche réside dans la compréhension du fonctionnement de flexbox. En implémentant les règles CSS suivantes, nous pouvons créer le comportement souhaité :

.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;
}

En utilisant ces règles CSS, nous pouvons obtenir les résultats suivants :

1. Conteneur Flexbox (.list-container) : Le conteneur parent utilise inline-flex pour aligner les éléments enfants (.list) horizontalement sur la même ligne.
2. Conteneur de liste (.list) : Ce conteneur utilise flex-direction: column pour aligner les éléments de liste (.list-item) verticalement dans une colonne.
3. Éléments de liste (.list-item) : Ces éléments ont plusieurs propriétés de style , y compris une largeur fixe qui permet à tous les éléments d'apparaître de taille égale. De plus, flex-wrap: wrap garantit que les éléments sont répartis sur plusieurs lignes si nécessaire, imitant le comportement de l'exemple basé sur JavaScript.

Voici un exemple de structure HTML qui démontre l'application de cette méthode. :

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

<div class="list-container">
  <div class="list">
    <div class="list-item">fresh figs</div>
    <div class="list-item">pine nuts</div>
    <div class="list-item">honey</div>
    <div class="list-item">balsamic vinegar</div>
  </div>
</div>

En conclusion, il est possible de reproduire les fonctionnalités de l'exemple basé sur JavaScript uniquement en utilisant CSS. En utilisant les principes de flexbox, nous pouvons garantir que tous les éléments d'une mise en page donnée ont la même largeur que l'élément le plus large, créant ainsi une apparence visuellement cohérente et organisée.

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!