Comment créer une mise en page de liste réactive avec des colonnes ajustant dynamiquement à l'aide de CSS3 ?

Affichage des éléments de liste dans des colonnes à l'aide de CSS3

Énoncé du problème :

Création d'une mise en page réactive nécessite d'afficher les éléments de la liste verticalement, avec le nombre de colonnes déterminé par la largeur du navigateur.

Solution CSS3 :

Les colonnes CSS3 offrent une solution efficace pour cette mise en page :

#limheight {
    height: 300px; /* Define the container's height */
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /* Specify the desired number of columns */
}

#limheight li {
    display: inline-block; /* Ensure each list item is treated as a block element */
}

Exemple :

<ul>

Lorsque la fenêtre du navigateur est suffisamment large, les éléments de la liste seront affichés dans trois colonnes :

1  4  7
2  5  8
3  6  9

À mesure que la fenêtre du navigateur se rétrécit, les colonnes s'ajusteront dynamiquement pour conserver une présentation visuellement attrayante.

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!