Wie kann ich mithilfe von CSS oder jQuery die Höhen von Kartenköpfen, die keine direkten untergeordneten Elemente ihres übergeordneten Containers sind, dynamisch ausgleichen?

Kartenkopfzeilen mithilfe von CSS oder jQuery dynamisch ausgleichen

Problem:

Anpassung der Höhen von Kartenköpfe, die trotz Änderungen im Inhalt und im reaktionsfähigen Bildschirm keine direkten untergeordneten Elemente des übergeordneten Containers sind Größen.

CSS-Lösung:

Dieser Ansatz nutzt die Inline-Block-Eigenschaft und die Funktionen zur automatischen Höhenanpassung von HTML-Tabellenzellen, um Kopfzeilenhöhen dynamisch auszugleichen.

<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-Lösung:

Diese Lösung verwendet jQuery zum Festlegen gleicher Höhen für Kopfzeilen und kann basierend auf Zeilen- oder Spaltenanforderungen angepasst werden.

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

Diese Lösungen bieten eine dynamische und reaktionsschnelle Anpassung der Kopfzeilenhöhen und sorgen so für Konsistenz im UI-Design unabhängig vom Inhalt oder Bildschirmgröße.

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von CSS oder jQuery die Höhen von Kartenköpfen, die keine direkten untergeordneten Elemente ihres übergeordneten Containers sind, dynamisch ausgleichen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!