Bagaimanakah Saya Boleh Membuat Berbilang Elemen dengan Kandungan Boleh Ubah Mempunyai Ketinggian Sama Menggunakan jQuery atau CSS?

Menyamakan Ketinggian Elemen dengan jQuery dan CSS

Dalam senario di mana anda mempunyai berbilang elemen dengan kandungan teks yang tidak pasti, mencapai ketinggian yang sama untuk konsistensi visual boleh mencabar. Artikel ini meneroka cara untuk menyelesaikan masalah ini menggunakan jQuery atau CSS.

JQuery Solution

jQuery menyediakan penyelesaian yang mudah untuk mencari elemen tertinggi dan menetapkan ketinggian elemen lain sewajarnya. Begini caranya:

$(document).ready(function() {
   var maxHeight = -1;

   $('.features').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.features').each(function() {
     $(this).height(maxHeight);
   });
 });

Kod ini berulang melalui setiap elemen dengan kelas "ciri" dan mengemas kini pembolehubah maxHeight untuk menjejaki elemen tertinggi. Kemudian, ia berulang lagi, menetapkan ketinggian setiap elemen supaya sepadan dengan maxHeight.

Penyelesaian CSS

Walaupun CSS tidak membenarkan perbandingan langsung ketinggian elemen, gabungan min-height, max-height dan flexbox boleh mencapai kesan yang sama:

.features {
  min-height: 100px;
  max-height: 500px;
  display: flex;
  flex-direction: column;
}

Kod CSS ini menetapkan ketinggian minimum dan maksimum untuk setiap elemen .features, memastikan ia tidak mengecut atau mengembang melebihi had tersebut. Reka letak flexbox memastikan ia sejajar secara menegak, menyamakan ketinggiannya dengan berkesan.

Dengan memanfaatkan jQuery atau CSS, anda boleh memastikan elemen anda mempunyai ketinggian yang sama, tanpa mengira kandungan teksnya, mengekalkan penampilan yang menarik dan konsisten dari segi visual. pembentangan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Berbilang Elemen dengan Kandungan Boleh Ubah Mempunyai Ketinggian Sama Menggunakan jQuery atau CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!