Bagaimanakah Saya Boleh Membuat Div Kanak-kanak Meregangkan Ketinggian Induknya dengan Ketinggian Tidak Diketahui?

Meregangkan Div Kanak-Kanak untuk Memadankan Ketinggian Ibu Bapa

Apabila anda menghadapi situasi seperti yang diterangkan, di mana ketinggian div kanak-kanak sepatutnya sepadan induknya tetapi ketinggian induk tidak diketahui, penyelesaian boleh didapati melalui flexbox.

Untuk mencapai menegak penskalaan div anak, elemen induk memerlukan gaya berikut:

display: flex;

Selain itu, anda harus menambah awalan penyemak imbas untuk memastikan keserasian merentas penyemak imbas.

Item penjajaran: regangan; harta juga penting. Walau bagaimanapun, memandangkan ia adalah nilai lalai untuk item jajar dalam kotak flex, anda tidak perlu menetapkannya secara eksplisit melainkan anda berhasrat untuk menggunakan nilai yang berbeza.

Sifat align-item Flexbox mempengaruhi elemen anak, bukan elemen yang digunakan untuknya. Untuk menentukan regangan bagi elemen kanak-kanak, anda boleh menggunakan sifat align-self.

Pertimbangkan contoh berikut:

.parent {
  background: red;
  padding: 10px;
  display:flex;
}

.other-child {
  width: 100px;
  background: yellow;
  height: 150px;
  padding: .5rem;
}

.child {  
  width: 100px;
  background: blue;
}

<div class="parent">
  <div class="other-child">
    Only used for stretching the parent
  </div>
  <div class="child"></div>
</div>

Dalam contoh ini, div anak lain wujud semata-mata untuk tujuan regangan ketinggian ibu bapa. Akibatnya, div kanak-kanak akan menduduki 100% ketinggian boleh laras ibu bapa.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Kanak-kanak Meregangkan Ketinggian Induknya dengan Ketinggian Tidak Diketahui?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!