Bagaimana Membuat Dua Div Terapung Sama Tinggi dengan Garis Pemisah dalam CSS?

Membuat Div Terapung Ketinggian Sama dengan CSS

Masalah: Mencipta dua div terapung yang berkongsi ketinggian yang sama dan mempunyai garis pemisah antara mereka, tanpa menggunakan jadual untuk semantik sebab.

Penyelesaian: Untuk mencapai ini, anda boleh menggunakan teknik 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;
  border-left: 1px solid black;
  background-color: red;
  padding-bottom: 500em;
  margin-bottom: -500em;
}

Penjelasan:

• Membungkus div dalam bekas dengan limpahan: tersembunyi memaksa pemisah garis yang disebabkan oleh div terapung berada dalam bekas.
• Menggunakan pelapik bahagian bawah yang besar dan margin negatif dengan jumlah yang sama pada div memastikan ia mengembang untuk menduduki 100% ketinggian sementara kandungannya masih berpusat menegak.
• Garisan yang memisahkan div dibuat menggunakan jidar atau sempadan kecil yang digunakan pada salah satu daripadanya.

Dengan menggunakan CSS ini teknik, anda boleh mencipta dua div terapung sama tinggi tanpa implikasi semantik menggunakan jadual.

Atas ialah kandungan terperinci Bagaimana Membuat Dua Div Terapung Sama Tinggi dengan Garis Pemisah dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!