Comment aligner verticalement les colonnes de blocs en ligne pour une mise en page cohérente ?

Alignement vertical des colonnes de blocs en ligne

Lors de l'utilisation de blocs en ligne pour créer des colonnes, il est crucial de relever le défi du déplacement des colonnes vers le bas avec du contenu ajouté dans la première colonne. Pour résoudre ce problème, nous devons garantir un bon alignement vertical.

La solution réside dans l'ajout de déclarations CSS pour aligner verticalement les colonnes en haut :

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

Cela garantit que même avec des variations contenu dans la première colonne, les autres colonnes restent alignées en haut.

Bien que le bloc en ligne ait ses inconvénients, il reste une option efficace pour créer des colonnes simples. Cependant, envisagez d'utiliser flexbox ou CSS Grid pour des dispositions de colonnes plus avancé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!