Comment puis-je créer une disposition transparente sur plusieurs lignes de divisions à hauteur variable avec CSS ?

Divers flottants à hauteurs variables en CSS

Énoncé du problème

Le but est d'afficher un nombre infini de divs de hauteurs variables dans un conteneur parent de largeur fixe. Les divs doivent s'organiser de manière transparente en lignes, comme illustré dans l'image fournie. Cependant, l'utilisation de flottants CSS ou d'un affichage en blocs en ligne entraîne des écarts de hauteur qui perturbent la mise en page souhaitée.

Solution

Malheureusement, réaliser cette mise en page en utilisant uniquement du CSS pur n'est pas réalisable dans tous les principaux navigateurs. Les solutions traditionnelles telles que les divs flottants ou les affichages en blocs en ligne rencontrent des difficultés en raison des hauteurs imprévisibles des divs.

jQuery Masonry

Pour résoudre ce problème, il est recommandé de exploitez les capacités de jQuery Masonry, une puissante bibliothèque JavaScript qui facilite une gestion de mise en page réactive avec des configurations personnalisables. La maçonnerie analyse dynamiquement les hauteurs des divs, les organisant automatiquement en colonnes et en rangées tout en conservant des hauteurs égales dans chaque rangée, optimisant ainsi l'utilisation de l'espace dans le conteneur.

Exemple

Considérez le code CSS et HTML fourni, qui tente initialement de résoudre le problème des approches CSS défectueuses. En intégrant jQuery Masonry comme indiqué ci-dessous, nous pouvons gérer efficacement la variabilité de la hauteur et obtenir la disposition souhaitée :

<script src="masonry.pkgd.min.js"></script>
<script>
    $(function() {
        $('#holder').masonry({
            itemSelector: '.box',
            columnWidth: 100
        });
    });
</script>

En utilisant Masonry, les divs ajustent leurs hauteurs de manière autonome, ce qui donne une grille propre et esthétique. comme la mise en page. Cette solution élimine les problèmes de réglage manuel des pixels et de compatibilité du navigateur associés aux approches CSS pures.

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!