Comment aligner verticalement des éléments de différents parents en CSS sans JavaScript ?

CSS - Comment aligner verticalement les enfants de différents parents

Pour aligner verticalement les enfants de différents parents sans utiliser JavaScript, faites-en des frères et sœurs et utilisez flexbox pour contrôler leur commande et leur base flexible. Voici comment y parvenir :

Code mis à jour :

<code class="css">@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

  .content > * {
    flex-basis: calc(50% - 30px);
  }

  .content h2 {
    order: 0;
  }
  .content p {
    order: 1;
  }
  .content p + p {
    order: 2;
    flex-basis: calc(100% - 30px);
  }
  .content ul {
    order: 3;
  }
}</code>

Code HTML :

<code class="html"><div class="content">
  <h2>Lorem ipsum Lorem ipsum</h2>
  <p>...</p>
  <p>...</p>
  <ul class="check">...</ul>
  <h2>Lorem ipsum</h2>
  <p>...</p>
  <ul class="check">...</ul>
</div></code>

Explication :

• Sur les écrans plus larges que 768 px, le contenu est affiché sous forme d'éléments flexibles, leur ordre étant déterminé par les propriétés de l'ordre.
• flex-basis définit la largeur de chaque élément, mais une largeur de 100 % est définie pour l'élément p vide afin de garantir qu'il remplit l'espace disponible.
• En rendant les éléments frères et sœurs dans le div de contenu, ils peuvent s'aligner verticalement.
• Personnalisez les points d'arrêt dans la requête multimédia pour qu'ils correspondent à ceux de Bootstrap si nécessaire.
• Vous pouvez également ajouter des bordures aux éléments à l'aide des propriétés de bordure, en les ajustant avec les requêtes multimédias pour prendre en charge l'alignement vertical et horizontal.

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!