Bagaimanakah saya boleh menyamakan ketinggian pengepala kad secara dinamik yang bukan anak langsung bekas induk mereka menggunakan CSS atau jQuery?

Menyamakan Pengepala Kad Secara Dinamik Menggunakan CSS atau jQuery

Masalah:

Memadankan ketinggian pengepala kad yang bukan anak langsung kepada bekas induk, walaupun terdapat perubahan dalam kandungan dan skrin responsif saiz.

Penyelesaian CSS:

Pendekatan ini memanfaatkan sifat blok sebaris dan ciri pelarasan ketinggian automatik sel jadual HTML untuk menyamakan ketinggian pengepala secara dinamik.

<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 Penyelesaian:

Penyelesaian ini menggunakan jQuery untuk menetapkan ketinggian yang sama untuk pengepala dan boleh disesuaikan berdasarkan keperluan baris atau lajur.

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

Penyelesaian ini menyediakan dinamik dan responsif pemadanan ketinggian pengepala, memastikan ketekalan dalam reka bentuk UI tanpa mengira kandungan atau saiz skrin.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menyamakan ketinggian pengepala kad secara dinamik yang bukan anak langsung bekas induk mereka menggunakan CSS atau jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!