Comment rendre les éléments de contenu dynamiques de même hauteur dans le développement Web ?

Égalisation des hauteurs des éléments de contenu dynamique

Dans le développement Web, il est courant de rencontrer un scénario dans lequel vous avez plusieurs éléments avec des longueurs de contenu variables qui doivent avoir des hauteurs égales pour disposition optimale. Un exemple est l'utilisation de colonnes pour afficher des listes ou des résumés.

jQuery et CSS proposent des solutions pour relever ce défi et garantir que les éléments de différentes hauteurs sont automatiquement ajustés au plus grand d'entre eux.

Approche jQuery

jQuery vous permet de parcourir facilement chaque élément et d'identifier le plus grand à l'aide de la méthode height(). En suivant la hauteur de l'élément le plus grand pendant l'itération, vous pouvez ensuite définir la hauteur de tous les autres éléments pour qu'elle corresponde au plus grand.

$(document).ready(function() {
  var maxHeight = -1;

  $('.features').each(function() {
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
  });

  $('.features').each(function() {
    $(this).height(maxHeight);
  });
});

Approche CSS uniquement

Bien que CSS seul ne fournisse pas prise en charge directe de la sélection des éléments en fonction de leur hauteur, vous pouvez toujours obtenir cette fonctionnalité en utilisant JavaScript pour manipuler le DOM et appliquer les styles CSS nécessaires. Cette approche consiste à créer une nouvelle classe CSS qui définit la hauteur des éléments et à l'ajouter dynamiquement à l'élément le plus haut.

// Loop through elements and find the tallest
const elements = document.querySelectorAll('.features');
let tallest = 0;

for (let i = 0; i < elements.length; i++) {
  const height = elements[i].offsetHeight;
  if (height > tallest) {
    tallest = height;
  }
}

// Create a new CSS class and set the height
const tallClass = document.createElement('style');
tallClass.innerText = '.tall { height: ' + tallest + 'px; }';

// Add the CSS class to the tallest element
const tallestElement = document.querySelector(`.features[offsetHeight='${tallest}']`);
tallestElement.classList.add('tall');

Conclusion

En utilisant jQuery ou CSS, vous pouvez ajuster dynamiquement les hauteurs des éléments pour assurer la cohérence, créant une disposition visuellement attrayante et bien organisée.

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!