Comment résoudre les problèmes d'alignement vertical lors de l'utilisation d'affichage : bloc en ligne pour les colonnes ?

Afficher les colonnes en bloc en ligne : résoudre les problèmes d'alignement vertical

Lors de l'utilisation de display: inline-block pour construire plusieurs colonnes, il est essentiel de résoudre le problème d'alignement vertical qui peut survenir lors de l'ajout de contenu.

La cause première réside dans l'alignement vertical par défaut des éléments en ligne. Pour remédier à cela, appliquez vertical-align: top; aux éléments de bloc en ligne :

.cont span {
    display: inline-block;
    vertical-align: top;     /* Aligns columns vertically at the top */
    height:100%;
    line-height: 100%;
    width: 33.33%;           /* For demonstration purposes only */
    outline: 1px dashed red; /* For demonstration purposes only */
}

Cela garantit que toutes les colonnes conservent leur alignement vertical, quelle que soit la hauteur du contenu dans chaque colonne.

Bien que le bloc en ligne puisse être utilisé pour la colonne Lors de la création, certains développeurs préfèrent des méthodes alternatives telles que float, flexbox ou grille CSS en raison des espaces blancs inhérents associés au bloc en ligne.

En comprenant les techniques d'alignement vertical et en considérant options de mise en page alternatives, vous pouvez construire efficacement des structures multi-colonnes en utilisant display: inline-block ou d'autres méthodes appropriées.

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!