Comment afficher les éléments de la liste dans des colonnes avec une mise en page adaptative ?

Affichage des éléments de liste sous forme de colonnes dans une mise en page réactive

Votre objectif d'afficher les éléments de liste verticalement, en fonction de la largeur du navigateur, peut être atteint en utilisant Colonnes CSS3. Voici comment procéder :

À l'aide de HTML, enveloppez les éléments de votre liste dans un fichier <div> avec une hauteur fixe et spécifiez le nombre de colonnes à l'aide de la propriété column-count :

<div>

En CSS, définissez la hauteur du conteneur et assurez-vous que chaque élément de la liste est affiché en ligne-bloc :

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

Lorsque le navigateur est redimensionné, CSS3 ajustera automatiquement le nombre de colonnes et réorganisera les éléments de la liste pour optimiser leur affichage. Le nombre spécifique de colonnes affichées dépendra de la largeur disponible et de la largeur des éléments de la liste eux-mêmes.

En utilisant cette technique, vous pouvez obtenir une mise en page réactive où les éléments de la liste sont affichés sur une ligne verticale, avec les colonnes ajustement dynamique en fonction de la taille du navigateur.

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!