Alignement vertical des colonnes de blocs en ligne

Lorsque vous utilisez l'affichage: le bloc en ligne pour créer des colonnes, il devient évident lorsque le contenu est ajouté à la première colonne, les colonnes de sous-précédent descendent verticalement. Cela peut être résolu en utilisant la propriété CSS d'alignement vertical.

pour éviter ce problème, ajoutez-align: top; à la déclaration CSS du conteneur. Cela garantit que toutes les colonnes s'alignent verticalement en haut, quel que soit le contenu de chaque colonne.

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

Approches alternatives

Bien que le bloc de ligne puisse être utilisé pour créer des colonnes, ce n'est peut-être pas la solution optimale en raison de problèmes d'espace blanc potentiels entre les colonnes. Envisagez d'utiliser Flex Box ou CSS Grid à la place, car ils fournissent plus de contrôle sur la disposition et l'alignement des colonnes.