Bagaimanakah Saya Boleh Membuat Dua Div Terapung Ketinggian Yang Sama Hanya Menggunakan CSS?

Menjadikan Dua Div Terapung Sama Ketinggian dalam HTML/CSS

Pengenalan

Mencapai sama rata ketinggian dalam div boleh mencabar, terutamanya apabila ia bersebelahan dan mempunyai kandungan yang berbeza panjang. Satu penyelesaian biasa ialah menggunakan jadual, tetapi pendekatan ini mungkin tidak sesuai dari segi semantik.

Menggunakan CSS untuk Mencipta Pembahagian Ketinggian Sama

Untuk mencapai ketinggian yang sama tanpa menggunakan jadual, CSS menyediakan beberapa teknik. Satu pendekatan melibatkan menetapkan padding bawah yang besar, menafikan padding itu dengan margin bawah negatif dan mengelilingi div dengan bekas dengan limpahan tersembunyi.

Pelaksanaan

Untuk menunjukkan teknik ini , pertimbangkan kod CSS berikut:

#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; /* for IE compatibility */
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Dalam HTML, buat bekas div dan dua anak divs:

<div>
<p>Pendekatan ini pada asasnya memaksa kedua-dua div untuk mempunyai ketinggian yang sama, walaupun ia mengandungi jumlah kandungan yang berbeza. Pelapik bawah yang besar dan margin negatif membatalkan satu sama lain, membenarkan div mengambil hanya ruang menegak yang mereka perlukan. Bekas dengan limpahan tersembunyi memastikan bahawa sebarang kandungan berlebihan tidak kelihatan.</p>
<p><strong>Kesimpulan</strong></p>
<p>Teknik CSS ini menyediakan cara yang betul dari segi semantik untuk mencipta div terapung ketinggian yang sama dalam HTML/ CSS. Ia secara berkesan meniru gelagat jadual tanpa memperkenalkan penanda yang tidak perlu.</p>
</div>

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