Comment afficher les éléments de la liste sous forme de colonnes avec CSS3 ?

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

Pouvez-vous afficher des listes en lignes ou en colonnes en fonction de la taille de l'écran ? Il s’agit d’un défi courant dans la conception Web réactive. Bien que les tableaux soient une option, CSS3 fournit une solution plus élégante avec sa propriété columns.

Voici un exemple de structure HTML :

<div>

Pour afficher ces éléments de liste sous forme de colonnes, ajoutez le CSS suivant :

#limheight {
  height: 300px; /* Your fixed height */
  -webkit-column-count: 3;
  -moz-column-count: 3;
  column-count: 3; /* Number of columns */
}

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

Le résultat sera trois colonnes d'éléments de liste, comme indiqué :

1   4   7
2   5   8
3   6   9

Ajuster la valeur du nombre de colonnes pour modifier le nombre de colonnes. Pour plus de réactivité, vous pouvez utiliser des requêtes multimédias pour basculer entre les mises en page à une colonne et à plusieurs colonnes en fonction de la taille de l'écran.

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!