Comment aligner verticalement les colonnes de blocs en ligne ?

Alignement vertical des colonnes de blocs en ligne

Lors de l'utilisation de display:inline-block pour créer des colonnes, il devient évident que lorsque du contenu est ajouté jusqu'à la première colonne, les colonnes suivantes descendent verticalement. Cela peut être résolu en utilisant la propriété CSS vertical-align.

Pour éviter ce problème, ajoutez vertical-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 en ligne puisse être utilisé pour créer des colonnes, ce n'est peut-être pas la solution optimale en raison de problèmes potentiels d'espace blanc entre les colonnes. Pensez plutôt à utiliser une boîte flexible ou une grille CSS, car elles offrent plus de contrôle sur la disposition et l'alignement des 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!