Comment garder les colonnes alignées lors de l'utilisation de « display : inline-block » ?

Maintenir l'alignement des colonnes à l'aide de Display : Inline-Block

Lors de l'utilisation de display : inline-block pour des mises en page à plusieurs colonnes, il est important de prendre en compte le problème des colonnes descendantes lorsque du contenu est ajouté à l'une d'entre elles. Cette perturbation dans la mise en page peut être résolue en utilisant la propriété vertical-align pour aligner les colonnes verticalement en haut.

En incorporant vertical-align: top; dans la déclaration CSS, nous veillons à ce que les colonnes s'alignent en haut, quel que soit le contenu ajouté à chaque colonne. Cela empêche le reste de la mise en page d'être affecté et maintient l'alignement horizontal souhaité.

Un exemple de code amélioré avec la propriété vertical-align incluse :

.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 */
}

Il convient de noter que lors de l'affichage : inline-block peut être utilisé pour la disposition des colonnes, il existe des options plus modernes et flexibles disponibles, telles que flexbox ou CSS grid. Ces approches peuvent offrir un meilleur contrôle et des solutions plus efficaces pour créer des arrangements multi-colonnes.

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!