Bagaimana untuk Membuat Dua Div Terapung Ketinggian yang Sama dengan CSS?

Div Terapung Ketinggian Sama Menggunakan CSS

Anda mahu mencapai dua div terapung yang berkongsi ketinggian yang sama dan mempunyai garisan yang memisahkannya. Jadual menawarkan penyelesaian yang mudah, tetapi atas sebab semantik, anda mencari alternatif CSS.

Kunci kepada lajur ketinggian yang sama terletak pada penggunaan pelapik bawah yang meluas dan margin bawah negatif. Selain itu, lajur mesti disertakan dalam div dengan limpahan tersembunyi.

Untuk penjajaran teks menegak, pertimbangkan coretan 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;
}

Dengan CSS ini, anda boleh menyelaraskan ketinggian dengan mudah daripada div terapung dan cipta reka letak yang menarik secara visual.

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