Bagaimanakah Saya Boleh Membuat Tajuk Bersaiz Tidak Sekata dalam Grid Flexbox Mempunyai Ketinggian Sama?

Tajuk Ketinggian Tidak Sekata dalam Grid Flexbox

Masalah

Ketinggian yang sama diingini untuk div kanak-kanak dalam grid flexbox, termasuk kedudukan bawahnya 2- tajuk baris h2.

Flexbox Had

Malangnya, mencapai ketinggian tajuk seragam semata-mata dengan Flexbox atau CSS tidak boleh dilaksanakan. Tingkah laku lalai Flexbox, "lenturkan lajur ketinggian sama," hanya terpakai kepada kanak-kanak item fleksibel dalam bekas yang sama.

Penyelesaian Cadangan

Sebagai alternatif, pertimbangkan untuk menggunakan perpustakaan JavaScript seperti jQuery untuk memadankan secara dinamik ketinggian tajuk yang paling tinggi. Pendekatan ini membolehkan pengendalian fleksibel bagi panjang tajuk yang tidak sekata walaupun elemen berada dalam bekas yang berbeza.

Coretan Kod

$(document).ready(function() {
  $(".block-list").each(function() {
    let max_height = 0;
    $(this).find("h2").each(function() {
      max_height = Math.max(max_height, $(this).height());
    });
    $(this).find("h2").height(max_height);
  });
});

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Tajuk Bersaiz Tidak Sekata dalam Grid Flexbox Mempunyai Ketinggian Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!