Comment aligner verticalement des divisions de hauteur inégale dans les lignes d'amorçage à l'aide de CSS Clearfixes ?

Alignement vertical de divs de hauteurs inégales dans Bootstrap à l'aide de CSS Clearfixes

L'objectif est d'aligner verticalement des divs de différentes hauteurs dans une ligne Bootstrap sans en utilisant des plugins externes comme Masonry. Voici une solution CSS :

Dans la structure HTML fournie, chaque catégorie est représentée par un div avec la classe "menu-category". Ces divs ont des hauteurs différentes en raison des différents éléments au sein de chaque catégorie. Pour obtenir l'empilement souhaité, nous pouvons utiliser les classes de visibilité de Bootstrap.

Plus précisément, nous pouvons ajouter une classe "clearfix" avec des modificateurs de visibilité pour effacer sélectivement les flotteurs dans la disposition div. Par exemple, si vous souhaitez effacer les flotteurs uniquement dans les tailles d'écran moyennes et grandes, vous pouvez utiliser le code suivant :

<div class="clearfix visible-md visible-lg"></div>

De même, pour effacer les flotteurs uniquement dans les petites tailles d'écran, utilisez :

<div class="clearfix visible-sm"></div>

En ajoutant ces divs de suppression aux endroits appropriés dans la structure HTML, vous pouvez empêcher les divs flottants de passer à la ligne suivante, les forçant à s'empiler. verticalement.

Exemple :

  

    ...
  
  

    ...
    <div class="clearfix visible-sm"></div>
  
  

    ...
  
  

    ...
    <div class="clearfix visible-md visible-lg"></div>
  
  

    ...
  

Avec cette approche, les hauteurs des div s'ajusteront dynamiquement en fonction du contenu, garantissant qu'elles s'empilent parfaitement dans le conteneur de lignes.

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!