Bagaimana untuk Mencipta Div Terapung Sama Tinggi dengan CSS Tulen?

Mencipta Div Terapung Sama Tinggi dalam HTML/CSS

Apabila bekerja dengan div terapung, kadangkala sukar untuk mengekalkan ketinggian yang sama antara div. Walaupun jadual boleh menjadi penyelesaian yang mudah, ia mungkin tidak selalu sesuai dari segi semantik. Nasib baik, terdapat teknik CSS tulen untuk mencapai matlamat ini.

Satu pendekatan ialah menggunakan padding bawah dan margin bawah negatif pada div. Pelapik mencipta rupa ruang menegak, manakala margin menentang pelapik ini. Ini boleh dimanfaatkan untuk membuat lajur yang sama ketinggian.

Selain itu, membalut div dalam bekas induk dengan limpahan: tersembunyi boleh menghalang kandungan daripada melimpah di luar bekas. Ini membantu mengekalkan penjajaran menegak.

Untuk memusatkan teks secara menegak dalam div, pertimbangkan untuk menggunakan teknik ketinggian garisan atau kotak lentur. Sebagai contoh, menetapkan ketinggian garisan kepada nilai yang besar atau menggunakan flexbox dan menjajarkan item ke tengah boleh membantu mencapai penjajaran menegak.

Sampel kod di bawah menunjukkan teknik ini:

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

Ini pendekatan menyediakan cara yang bersih dan sesuai dari segi semantik untuk mencipta div terapung sama tinggi dalam HTML/CSS.

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