Comment puis-je organiser des divisions à hauteur variable dans des lignes soignées à l'aide de CSS et JavaScript ?

Divs flottants CSS à hauteurs variables

Le défi réside dans l'hébergement d'un nombre infini de divs à hauteur variable au sein d'un parent à largeur fixe, en veillant à ce qu'ils se disposent en rangées soignées, comme illustré dans l'image fournie. Les tentatives d'utilisation de propriétés d'affichage flottantes ou en blocs en ligne se sont révélées difficiles en raison des variations de hauteur.

Solution :

Malheureusement, résoudre ce problème uniquement avec CSS n'est actuellement pas réalisable. dans tous les navigateurs. Les approches flottantes et en ligne ont toutes deux des limites. Les solutions basées sur la position nécessitent des ajustements manuels des pixels ou le recours au code côté serveur pour le réglage automatisé des pixels.

jQuery Masonry à la rescousse :

Pour gérer efficacement cette situation, il est recommandé d'exploiter la puissance de jQuery Masonry, une bibliothèque spécialement conçue pour organiser et organiser les éléments de manière dynamique. La maçonnerie ajuste automatiquement la disposition des divs en fonction de leur hauteur et de l'espace disponible, ce qui donne un agencement visuellement attrayant et réactif.

Mise en œuvre :

Pour mettre en œuvre la maçonnerie, téléchargez simplement la bibliothèque et incluez-la dans votre fichier HTML. Ensuite, initialisez Masonry avec votre conteneur div comme cible :

var container = document.querySelector('#holder');
var mason = new Masonry(container, {});

Cela permettra à Masonry de gérer la disposition des div dans le conteneur, garantissant qu'ils sont placés de manière optimale quelles que soient leurs différences de hauteur.

Avantages de jQuery Masonry :

• Ajustement automatique de l'élément mise en page
• Prise en charge des hauteurs d'éléments irrégulières
• Réponse dynamique au redimensionnement des pages
• Mise en œuvre simple et conviviale

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!