Bagaimanakah Saya Boleh Membuat Div Terapung Sama Tinggi Dengan Hanya Menggunakan CSS?

Membetulkan Percanggahan Ketinggian Div Terapung dalam HTML/CSS

Dalam bidang pembangunan web, cabaran biasa timbul apabila bekerja dengan div terapung: memastikan mereka sejajar dengan ketinggian yang sama. Teka-teki ini sering ditangani menggunakan jadual HTML, tetapi kebimbangan mengenai ketepatan semantik berterusan.

Penyelesaian pilihan terletak pada kuasa CSS. Dengan melaksanakan gabungan gaya tertentu, kita boleh mencapai div terapung ketinggian yang sama:

1. Limpahan Tersembunyi: Balut div dalam div induk dengan limpahan: tersembunyi. Ini mengehadkan div dalam kawasan yang ditetapkan, menghalangnya daripada melangkaui sempadannya.
2. Pelapik Bawah dan Margin Negatif: Sapukan pelapik bawah yang besar, seperti 500em, pada div. Ini mewujudkan ruang maya yang besar di bawah div.
3. Margin Bawah Negatif: Tambahkan jidar negatif bersamaan dengan nilai padding. Ini menggerakkan div ke atas, pada asasnya mengimbangi padding.

Coretan CSS berikut menunjukkan pendekatan ini:

#container {
  overflow: hidden;
  width: 100%;
}
#left-col {
  float: left;
  width: 50%;
  background-color: orange;
  padding-bottom: 500em;
  margin-bottom: -500em;
}
#right-col {
  float: left;
  width: 50%;
  margin-right: -1px;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Dengan menggunakan teknik ini, kami boleh memastikan bahawa div terapung melaraskan secara automatik ketinggian mereka agar sepadan dengan kandungan tertinggi, mewujudkan konsistensi visual yang menggembirakan.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Terapung Sama Tinggi Dengan Hanya Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!