Comment puis-je créer des listes multicolonnes avec CSS et gérer la compatibilité avec Internet Explorer ?

Création de colonnes à partir d'une liste à l'aide de CSS

Votre page Web comporte une longue liste qui défile excessivement. Pour améliorer la lisibilité, vous souhaitez afficher cette liste dans plusieurs colonnes sans nécessiter d'ajustements manuels importants à mesure que la liste s'allonge.

CSS présente une solution simple :

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

Ce code CSS garantit que le La liste sera divisée en quatre colonnes, avec un espace de 20 pixels entre elles.

Cross-Browser Compatibilité

La solution CSS pour créer des colonnes est largement prise en charge dans tous les navigateurs, à l'exception d'Internet Explorer 9 et versions antérieures.

Alternative pour Internet Explorer

Si vous avez besoin d'une compatibilité avec Internet Explorer, vous pouvez envisager des alternatives JavaScript, telles que Columnizer jQuery plugin.

Remplacer vers Float pour Internet Explorer

Une alternative spécifiquement pour Internet Explorer consiste à utiliser une solution de repli float. Cela peut entraîner un ordre d'articles incorrect, mais l'apparence visuelle sera similaire :

li {
    width: 25%;
    float: left
}

Vous pouvez appliquer cette solution de secours de manière sélective à l'aide de Modernizr s'il est déjà présent dans votre projet.

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!