Comment maintenir la cohérence de la disposition des colonnes avec Inline-Block ?

Maintenir la disposition des colonnes avec Inline-Block

Lors de l'utilisation de display:inline-block pour créer des dispositions multi-colonnes, il est courant de rencontrer des problèmes où l'ajout de contenu à une colonne affecte l'alignement des autres, les faisant tomber en dessous.

Solution :

Pour résoudre ce problème, incorporez l'alignement vertical : haut; Déclaration CSS pour aligner les colonnes verticalement en haut. Cela garantit que toutes les colonnes s'alignent systématiquement au même niveau vertical, quelle que soit la longueur du contenu.

.cont span {
    display: inline-block;
    vertical-align: top;     /* Vertically align the inline-block elements */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* Just for Demo */
    outline: 1px dashed red; /* Just for Demo */
}

Méthodes alternatives de création de colonnes :

Bien que le bloc en ligne puisse être pratique, il présente des limites, telles que des espaces blancs entre les colonnes. Pour obtenir des dispositions de colonnes plus robustes et flexibles, envisagez d'utiliser display:flex ou display:grid. Ces méthodes offrent un meilleur contrôle sur la mise en page et l'alignement, garantissant une présentation cohérente même avec des longueurs de contenu variables.

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!