jQuery 또는 CSS를 사용하여 여러 Div 요소의 높이를 동일하게 만드는 방법은 무엇입니까?

jQuery 또는 CSS를 사용하여 동일한 높이 요소를 얻는 방법

웹 개발에서는 미적으로 보기 좋고 일관된 레이아웃을 위해 요소를 수직으로 정렬하는 것이 중요합니다. 이 질문은 다양한 양의 콘텐츠가 포함된 경우에도 동일한 높이의 여러 div 요소를 만드는 문제를 해결합니다.

jQuery 솔루션

인기 있는 JavaScript 라이브러리인 jQuery는 식별하기 위한 간단한 접근 방식을 제공합니다. 가장 높은 요소를 선택하고 이에 맞춰 다른 요소의 높이를 설정합니다.

$(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
   });
});

이 스크립트는 가장 높은 div의 높이를 계산하고 이를 ".features" 클래스가 있는 모든 div에 할당하여 동일한 높이를 얻습니다.

CSS 전용 솔루션

CSS에는 직접적인 높이 선택이나 비교 기능이 없지만 CSS Grid를 사용하여 문제를 해결할 수 있습니다.

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

.features {
  height: 100%;
}

위 내용은 jQuery 또는 CSS를 사용하여 여러 Div 요소의 높이를 동일하게 만드는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!