Comment puis-je obtenir une disposition de colonnes réactive avec des divisions de hauteurs variables à l'aide de CSS et jQuery ?

Divs flottants CSS à hauteurs variables

L'utilisation de flottants CSS pour organiser les divs dans un conteneur présente souvent des défis lorsqu'il s'agit de gérer des éléments de variables hauteurs. Comme le montre l'exemple fourni, les divs flottants dans les colonnes se brisent lorsque les hauteurs diffèrent.

Limites CSS :

Malheureusement, il n'existe pas de solution CSS pure qui résout parfaitement ce problème. sur tous les navigateurs.

• Les flotteurs peuvent entraîner des problèmes d'alignement et chevauchement.
• Les éléments de bloc en ligne ne s'enroulent pas correctement autour des éléments plus grands.
• L'utilisation du positionnement absolu nécessite un réglage manuel des pixels, ce qui peut s'avérer peu pratique pour le contenu dynamique.

Solution : jQuery Masonry

La solution recommandée pour ce scénario est d'utiliser jQuery Masonry plugin. Ce plugin organise intelligemment les éléments dans un conteneur, ajustant automatiquement les lignes et les colonnes pour s'adapter aux hauteurs variables.

Mise en œuvre :

1. Inclure la bibliothèque jQuery Masonry dans votre projet :

   <script src="masonry.pkgd.js"></script>

2. Initialiser la maçonnerie sur le conteneur cible :

   $('#container').masonry();

En utilisant Masonry, le code que vous avez fourni organisera désormais correctement les divs en colonnes, quelle que soit leur hauteur, comme vous le souhaitez. Il fournit une solution fiable pour les mises en page flexibles avec un contenu variable.

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!