如何使用 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中文网其他相关文章！