Bagaimana untuk Mencipta Lajur Ketinggian Sama dengan CSS Tulen?

Mencipta Lajur Ketinggian Sama dengan CSS

Lajur ketinggian sama adalah penting untuk mencipta reka letak yang menarik secara visual. Walaupun terdapat pelbagai pendekatan, satu kaedah yang cekap melibatkan penggunaan CSS tulen. Tutorial ini menafikan teknik, menghilangkan tanggapan bahawa ia hanyalah pertindihan penyelesaian lain.

Cabaran

Bagaimanakah kita boleh membuat lajur yang:

• Isi seluruh ruang menegak div induk mereka
• Pamerkan sama ketinggian tanpa bergantung pada imej latar belakang

Berdasarkan penyelidikan yang meluas, kami telah menemui penyelesaian yang unik.

Jawapannya

Untuk pendekatan mudah, terima helah CSS berikut:

.parent {
  display: table;
}
.child {
  display: table-cell;
}

Helah ini memanfaatkan paparan berasaskan jadual harta benda. Apabila div induk menganggap paparan jadual, div anaknya menjadi sel jadual, mewarisi ketinggian yang sama.

Contoh

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

Nota: IE7 tidak berfungsi dengan baik dengan pendekatan ini, memerlukan penyelesaian yang lebih kompleks untuk keserasian ke belakang.

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