Bagaimana untuk Mencapai Lajur Ketinggian Sama dengan CSS Tulen?

Cara Membuat Lajur Ketinggian Sama Sebenar Menggunakan CSS Tulen

Apabila bekerja dengan berbilang lajur dengan panjang kandungan yang berbeza-beza, mencapai ketinggian yang sama tanpa menggunakan imej latar belakang boleh menjadi perkara biasa cabaran. Selepas penyelidikan yang meluas, kami telah membangunkan penyelesaian CSS unik yang menangani isu ini dengan berkesan.

Penyelesaian

Untuk pendekatan ringkas yang mengagihkan ruang menegak dengan berkesan, pertimbangkan untuk menggunakan sifat berikut:

.parent {
  display: table;
}

.child {
  display: table-cell;
}

Kaedah ini memperuntukkan struktur seperti jadual kepada bekas induk dan anak-anaknya, memastikan ia menduduki tempat menegak yang sama ruang.

Keserasian

Adalah penting untuk ambil perhatian bahawa penyelesaian ini tidak serasi dengan Internet Explorer 7. Jika sokongan untuk IE7 adalah penting, pendekatan yang lebih kompleks mungkin diperlukan.

Contoh

<div class="parent">
  <div class="child">Column 1</div>
  <div class="child">Column 2 with longer content</div>
  <div class="child">Column 3</div>
</div>

Dalam contoh ini, ketiga-tiga lajur akan mempunyai ketinggian yang sama, tanpa mengira panjang kandungan setiap lajur.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Lajur Ketinggian Sama dengan CSS Tulen?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!