Comment puis-je créer des listes multi-colonnes avec CSS ?

Présentation de listes dans des colonnes à l'aide de CSS

Si vous avez une longue liste avec des éléments courts que vous souhaitez afficher dans un format plus compact, pensez à le diviser en colonnes. CSS fournit une solution simple pour cela.

Mise en page multi-colonnes CSS

Le module Mise en page multi-colonnes CSS vous permet de spécifier le nombre de colonnes à créer dans un élément. Voici comment l'appliquer :

ul {
    column-count: 4;  /* The number of columns */
    column-gap: 20px; /* Space between columns */
}

Ce code affichera la liste en quatre colonnes avec un espace de 20 px entre elles.

Support du navigateur

La mise en page multi-colonnes CSS est prise en charge par tous les navigateurs modernes à l'exception d'Internet Explorer 9 ou plus ancien.

Alternatives pour Internet Explorer

Si vous avez besoin de la prise en charge d'Internet Explorer, vous pouvez utiliser une solution JavaScript telle que le plugin Columnizer jQuery.

Retour à Float pour Internet Explorer

En guise de solution de repli, vous pouvez utiliser CSS float pour obtenir une mise en page similaire dans Internet Explorer. Cependant, cette méthode conservera l'ordre des éléments mais pas la structure des colonnes.

li {
    width: 25%;
    float: left
}

Remarque : Cette solution de secours peut être utilisée avec Modernizr ou des techniques de chargement conditionnel similaires pour cibler uniquement Internet Explorer. .

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!