Comment rendre plusieurs éléments Div de même hauteur à l'aide de jQuery ou CSS ?

Comment obtenir des éléments de hauteur égale à l'aide de jQuery ou CSS

Dans le développement Web, l'alignement vertical des éléments pour une mise en page esthétique et cohérente est crucial. Cette question répond au défi de créer plusieurs éléments div de hauteur égale, même lorsqu'ils contiennent des quantités variables de contenu.

Solution jQuery

jQuery, une bibliothèque JavaScript populaire, propose une approche simple pour identifier l'élément le plus grand et définissez la hauteur des autres pour qu'elle corresponde :

$(document).ready(function() {
   var maxHeight = 0; // Initialize maxHeight to 0

   $('.features').each(function() { // Loop through each .features div
     if ($(this).outerHeight() > maxHeight) { // Compare the current div's height to maxHeight
       maxHeight = $(this).outerHeight(); // Update maxHeight if the current div is taller
     }
   });

   $('.features').each(function() { // Loop through each .features div again
     $(this).height(maxHeight); // Set the height of each div to maxHeight
   });
});

Ce script calcule la hauteur du div le plus haut et l'attribue à tous les divs avec le Classe ".features", ce qui donne des hauteurs égales.

Solution CSS uniquement

Bien que CSS ne dispose pas de capacités de sélection ou de comparaison directe de hauteur, une solution de contournement utilisant CSS Grid est possible :

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(initial, 1fr));
  align-items: stretch;
}

.features {
  height: 100%;
}

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!