Comment aligner les enfants de parents différents à la même hauteur en CSS sans JavaScript ?

CSS : aligner les enfants de parents différents à la même hauteur

Lorsque vous travaillez avec CSS, il est possible d'aligner les enfants de différents éléments sur le même hauteur sans utiliser JavaScript. Ceci peut être réalisé à l'aide de flexbox, qui vous permet de contrôler la disposition et l'alignement des éléments dans un conteneur.

Pour réaliser cet alignement, suivez ces étapes :

1. Créez le conteneur une flexbox : Définir display: flex sur le conteneur qui contient les enfants.
2. Envelopper les enfants dans une flexbox : Définir display: flex sur l'élément qui contient les enfants , ou sur les enfants eux-mêmes.
3. Définissez la direction de flexion : Utilisez flex-direction: column pour faire circuler les enfants verticalement.
4. Égalisez la hauteur : Définissez align-self : étirez sur chaque élément enfant pour les rendre égaux en hauteur.

Dans l'exemple de code fourni :

<code class="css">.container {
  display: flex;
}

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

.content > * {
  align-self: stretch;
}</code>

Cette approche remplit l'exigence d'avoir enfants sur différentes colonnes de même hauteur tout en tenant compte de l'optimisation mobile de Bootstrap. La requête multimédia peut être ajustée pour s'adapter à différents points d'arrêt selon les besoins.

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!