Bagaimana Membuat Pelbagai Elemen Div Sama Tinggi Menggunakan jQuery atau CSS?

Cara Mencapai Elemen Ketinggian Sama Menggunakan jQuery atau CSS

Dalam pembangunan web, menjajarkan elemen secara menegak untuk reka letak yang estetik dan konsisten adalah penting. Soalan ini menangani cabaran untuk membuat berbilang elemen div pada ketinggian yang sama, walaupun apabila ia mengandungi jumlah kandungan yang berbeza-beza.

Penyelesaian jQuery

jQuery, perpustakaan JavaScript yang popular, menyediakan pendekatan yang mudah untuk mengenal pasti elemen tertinggi dan tetapkan ketinggian yang lain untuk dipadankan dengannya:

$(document).ready(function() {
   var maxHeight = 0; // Initialize maxHeight to 0

   $('.features').each(function() { // Loop through each .features div
     if ($(this).outerHeight() > maxHeight) { // Compare the current div's height to maxHeight
       maxHeight = $(this).outerHeight(); // Update maxHeight if the current div is taller
     }
   });

   $('.features').each(function() { // Loop through each .features div again
     $(this).height(maxHeight); // Set the height of each div to maxHeight
   });
});

Skrip ini mengira ketinggian div tertinggi dan menetapkannya kepada semua div dengan kelas ".features", menghasilkan ketinggian yang sama.

Penyelesaian CSS Sahaja

Walaupun CSS tidak mempunyai pilihan ketinggian langsung atau keupayaan perbandingan, penyelesaian menggunakan Grid CSS adalah mungkin:

.features-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(initial, 1fr));
  align-items: stretch;
}

.features {
  height: 100%;
}

Atas ialah kandungan terperinci Bagaimana Membuat Pelbagai Elemen Div Sama Tinggi Menggunakan jQuery atau CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!