Flexbox 그리드에서 크기가 다른 제목의 높이를 동일하게 만들려면 어떻게 해야 합니까?

Flexbox 그리드의 제목 높이가 고르지 않음

문제

Flexbox 그리드의 하위 div에는 하단 위치 2-를 포함하여 동일한 높이가 필요합니다. 라인 h2 제목.

Flexbox 제한 사항

안타깝게도 Flexbox나 CSS만으로는 균일한 제목 높이를 달성하는 것이 불가능합니다. Flexbox의 기본 동작인 "플렉스 동일 높이 열"은 동일한 컨테이너 내의 하위 플렉스 항목에만 적용됩니다.

제안된 솔루션

대안으로 jQuery와 같은 JavaScript 라이브러리를 사용하여 동적으로 일치시키는 것을 고려해 보십시오. 가장 높은 표제의 높이. 이 접근 방식을 사용하면 요소가 서로 다른 컨테이너에 있는 경우에도 균일하지 않은 제목 길이를 유연하게 처리할 수 있습니다.

코드 조각

$(document).ready(function() {
  $(".block-list").each(function() {
    let max_height = 0;
    $(this).find("h2").each(function() {
      max_height = Math.max(max_height, $(this).height());
    });
    $(this).find("h2").height(max_height);
  });
});

위 내용은 Flexbox 그리드에서 크기가 다른 제목의 높이를 동일하게 만들려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!