Comment puis-je diviser de longues listes en plusieurs colonnes à l'aide de CSS ?

Dissocier les listes en colonnes avec CSS

La présentation de listes longues et étroites dans plusieurs colonnes peut améliorer la lisibilité des pages Web et réduire le besoin de défilement excessif. Cet article explore les techniques CSS pour accomplir cette tâche.

Solution CSS multi-colonnes

Pour les navigateurs modernes prenant en charge la spécification CSS multi-colonnes, vous pouvez utiliser ce qui suit propriétés :

ul {
    column-count: 4;
    column-gap: 20px;
}

Cela divisera automatiquement la liste en quatre colonnes avec un espace de 20 px entre eux.

JavaScript de secours pour IE

IE 9 et versions antérieures ne prennent pas en charge les mises en page multi-colonnes, une solution de secours JavaScript est donc nécessaire :

1. Utilisez un plugin jQuery comme Columnizer (http://welcome.totheinter.net/columnizer-jquery-plugin/).
2. Implémentez une solution de secours manuelle qui utilise float: left et calcule la largeur appropriée pour chaque élément de la liste (comme indiqué dans http : //jsfiddle.net/NJ4Hw/).

Supplémentaire Notes

• Les préfixes -moz- et -webkit- sont utilisés pour la compatibilité avec les anciennes versions de Firefox et Safari.
• La solution de secours peut ne pas conserver l'ordre correct des répertorier les éléments dans IE.
• Envisagez d'utiliser un outil de test multi-navigateurs pour garantir la compatibilité entre les différents navigateurs.

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!