CSS 또는 jQuery를 사용하여 상위 컨테이너의 직계 하위 항목이 아닌 카드 헤더의 높이를 동적으로 동일화하려면 어떻게 해야 합니까?

CSS 또는 jQuery를 사용하여 카드 헤더를 동적으로 균등화

문제:

높이 일치 콘텐츠 및 반응의 변경에도 불구하고 상위 컨테이너의 직계 하위 항목이 아닌 카드 헤더

CSS 솔루션:

이 접근 방식은 HTML 테이블 셀의 인라인 블록 속성과 자동 높이 조정 기능을 활용하여 헤더 높이를 동적으로 균등화합니다.

<table class="parent">
  <thead>
    <tr>
      <th class="header">Header 1</th>
      <th class="header">Header 2</th>
      <th class="header">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item">
        <div class="content">Content for Header 1</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 2</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 3</div>
      </td>
    </tr>
    <tr>
      <td class="item">
        <div class="content">Content for Header 1</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 2, with extra wrapping</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 3</div>
      </td>
    </tr>
  </tbody>
</table>

.parent {
  display: table;
}
.header {
  display: inline-block;
  background-color: cornflowerblue;
}
.item {
  display: table-cell;
  padding: 20px;
}
.content {
  background-color: salmon;
  flex-grow: 1;
}

jQuery 솔루션:

이 솔루션은 jQuery를 사용하여 헤더의 높이를 동일하게 설정하고 행 또는 열 요구 사항에 따라 사용자 정의할 수 있습니다.

<div class="row">
  <div class="col item">
    <div class="header">Header 1</div>
    <div class="content">Content for Header 1</div>
  </div>
  <div class="col item">
    <div class="header">Header 2</div>
    <div class="content">Content for Header 2</div>
  </div>
  <div class="col item">
    <div class="header">Header 3</div>
    <div class="content">Content for Header 3</div>
  </div>
</div>

$(function() {
  // Preload header elements
  var $headers = $('.header');

  // Set equal height on all headers
  function setEqualHeight() {
    var maxHeight = 0;
    $headers.each(function() {
      maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });
    $headers.css('height', maxHeight + 'px');
  }

  // Set equal height per row
  function setEqualHeightPerRow() {
    var previousTop = 0;
    var height = 0;
    $headers.each(function() {
      var currentTop = $(this).offset().top;
      if (currentTop > previousTop) {
        $(this).css('height', height + 'px');
        previousTop = currentTop;
        height = 0;
      }
      height = Math.max(height, $(this).outerHeight());
    });
    $(this).css('height', height + 'px');
  }

  // Run on load and resize
  setEqualHeight();
  $(window).resize(setEqualHeight);
});

이 솔루션은 동적 및 반응형을 제공합니다. 헤더 높이를 일치시켜 콘텐츠나 화면 크기에 관계없이 UI 디자인의 일관성을 보장합니다.

위 내용은 CSS 또는 jQuery를 사용하여 상위 컨테이너의 직계 하위 항목이 아닌 카드 헤더의 높이를 동적으로 동일화하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!