Bagaimana untuk Menjajarkan Anak-anak Ibu Bapa yang Berlainan dengan Ketinggian yang Sama dalam CSS Tanpa JavaScript?

CSS: Menyelaraskan Kanak-kanak daripada Ibu Bapa Berlainan dengan Ketinggian Yang Sama

Apabila bekerja dengan CSS, adalah mungkin untuk menjajarkan kanak-kanak daripada elemen berbeza ke ketinggian yang sama tanpa menggunakan JavaScript. Ini boleh dicapai menggunakan flexbox, yang membolehkan anda mengawal reka letak dan penjajaran elemen dalam bekas.

Untuk mencapai penjajaran ini, ikut langkah berikut:

1. Buat bekas itu a flexbox: Set paparan: lentur pada bekas yang mengandungi kanak-kanak.
2. Balut kanak-kanak dalam flexbox: Set paparan: lentur pada elemen yang mengandungi kanak-kanak , atau pada kanak-kanak itu sendiri.
3. Tetapkan arah lentur: Gunakan lajur arah lentur: untuk menjadikan kanak-kanak mengalir secara menegak.
4. Samakan ketinggian: Tetapkan align-self: regangan pada setiap elemen kanak-kanak untuk menjadikannya sama tinggi.

Dalam contoh kod yang disediakan:

<code class="css">.container {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
}

.content > * {
  align-self: stretch;
}</code>

Pendekatan ini memenuhi keperluan untuk mempunyai kanak-kanak merentas lajur berbeza dengan ketinggian yang sama sambil mempertimbangkan pengoptimuman mudah alih Bootstrap. Pertanyaan media boleh dilaraskan untuk menampung titik putus yang berbeza mengikut keperluan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Anak-anak Ibu Bapa yang Berlainan dengan Ketinggian yang Sama dalam CSS Tanpa JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!