Comment maintenir une hauteur égale pour les colonnes avec des longueurs de contenu différentes en CSS ?

CSS : maintenir une hauteur égale pour les colonnes avec des longueurs de contenu différentes

Dans une disposition à deux colonnes, il est souhaitable d'aligner les listes dans chacune colonne horizontalement, même si la longueur du contenu varie. Cela pose un défi dans les conceptions réactives, car les colonnes peuvent se briser sur des écrans plus petits.

Pour réaliser cet alignement sans JavaScript, une méthode permettant aux éléments de se voir comme des frères et sœurs est requise. Pour des tailles d'écran plus larges, l'ordre des éléments doit être réorganisé pour garantir un empilage correct.

Voici une version mise à jour de votre code utilisant CSS et une requête média :

@media (min-width: 768px) {
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
  }

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

  .content h2 {                     /*  1st row  */
    order: 0;
  }
  .content p {                      /*  2nd row  */
    order: 1;
  }
  .content p + p {                  /*  3rd row  */
    order: 2;
    flex-basis: calc(100% - 30px);  /* as only 1 `p` in markup, it need 100% width,
                                       or add an extra empty in the markup  */
  }
  .content ul {                     /*  4th row  */
    order: 3;
  }
}

Cette requête média introduit une disposition flexbox pour l'élément .content, permettant à ses éléments enfants de s'aligner et de s'enrouler de manière flexible. Les propriétés d'ordre garantissent que les éléments sont empilés correctement lorsque les colonnes se séparent sur des écrans plus petits.

Pour ajouter des bordures aux éléments pour une distinction visuelle, vous pouvez utiliser des combinaisons de border-top, border-left, border-right et bordure inférieure, ajustées avec des requêtes multimédias supplémentaires pour tenir compte de l'empilement horizontal et vertical.

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!