Rumah >hujung hadapan web >tutorial css >Bagaimana untuk Mencipta Lajur Ketinggian Sama dengan CSS Tulen?

Bagaimana untuk Mencipta Lajur Ketinggian Sama dengan CSS Tulen?

Linda Hamilton
Linda Hamiltonasal
2024-11-18 11:50:02989semak imbas

How to Create Equal Height Columns with Pure CSS?

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!

Kenyataan:
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn