Maison >interface Web >tutoriel CSS >Comment puis-je créer des divisions flottantes à hauteur variable en CSS à l'aide de jQuery Masonry ?
Comment puis-je créer des divisions flottantes à hauteur variable en CSS à l'aide de jQuery Masonry ?
- Linda Hamiltonoriginal
- 2024-12-17 17:40:12455parcourir
Création de divs flottants à hauteur variable en CSS : un guide complet
Réaliser des divs flottants à hauteur variable en CSS présente un défi important. Les tentatives d'utilisation de floats ou display: inline-block se sont révélées infructueuses en raison de limitations inhérentes.
Limitations des approches conventionnelles
- Flotteurs : Les divs flottants ne peuvent s'aligner les uns à côté des autres qu'horizontalement, ce qui entraîne des lignes inégales en présence de variable hauteurs.
- Affichage : Inline-Block : Les éléments de bloc en ligne ne peuvent pas automatiquement s'enrouler sur une nouvelle ligne, ce qui entraîne l'extension des divs plus hauts au-delà des limites du conteneur parent.
Solution alternative : jQuery Masonry
Pour surmonter ces limitations, une solution populaire est jQuery Maçonnerie. Ce plugin JavaScript calcule dynamiquement la largeur minimale des colonnes et optimise la disposition des div en fonction de la hauteur de la colonne la plus haute. En conséquence, les divs de différentes hauteurs sont magnifiquement alignés dans les colonnes sans réglage manuel des pixels ni calculs complexes.
Mise en œuvre
Les étapes suivantes illustrent comment utiliser jQuery Masonry :
- Incluez jQuery et jQuery Masonry dans votre document HTML.
- Ajoutez Styles CSS au conteneur parent pour définir sa largeur et ses propriétés d'affichage.
- Initialisez Masonry sur le conteneur parent à l'aide du plugin Masonry, en lui passant comme argument l'ID ou la classe du conteneur.
Exemple de code
<head> <script src="https://unpkg.com/jquery@3.6.0/dist/jquery.min.js"></script> <script src="https://unpkg.com/masonry-layout@4/dist/masonry.pkgd.min.js"></script> </head> <body> <div>
En tirant parti de jQuery Masonry, les développeurs peuvent facilement obtenir une hauteur variable divs flottants en CSS, garantissant une mise en page élégante et réactive quelle que soit la hauteur des éléments.
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!