Comment puis-je afficher les éléments de la liste sous forme de colonnes en utilisant CSS ?

Affichage des éléments de liste sous forme de colonnes avec CSS

Création d'une mise en page réactive dans laquelle les éléments de liste circulent verticalement, en s'ajustant à la largeur disponible, peut être obtenu en utilisant des colonnes CSS. Suivez ces étapes :

1. Définissez le CSS de l'élément conteneur, en précisant sa hauteur et le nombre de colonnes souhaitées :

#limheight {
    height: 300px; /* Adjust to desired fixed height */
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count: 3; /* Placeholder value; can be adjusted */
}

2. Définissez la propriété d'affichage des éléments de la liste à bloquer en ligne pour leur permettre d'être placés dans des colonnes :

#limheight li {
    display: inline-block; /* Necessary for wrapping */
}

3. Inclure le code HTML de la liste, enfermé dans un élément conteneur avec la classe CSS spécifiée :

<div>

Au fur et à mesure que la fenêtre du navigateur est redimensionnée, les éléments de la liste ajusteront automatiquement leur disposition dans le nombre de colonnes spécifié, en maintenant le flux vertical souhaité.

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!