Bagaimana untuk Menjajarkan Elemen Div Secara Mendatar dengan Kawalan Limpahan?

Menjajarkan Elemen Div Secara Mendatar dengan Kawalan Limpahan

Dalam bidang reka letak CSS, mengurus peletakan elemen boleh memberikan cabaran yang unik. Satu isu biasa timbul apabila cuba menjajarkan div secara mendatar dalam bekas dengan lebar dan ketinggian tetap sambil menghalang limpahan.

Untuk memahami punca isu ini, pertimbangkan senario berikut: anda mempunyai div bekas dengan lebar dan ketinggian tertentu yang telah digunakan limpahan:tersembunyi. Dalam bekas ini, anda ingin mencipta baris mendatar float: elemen div kiri. Apabila div diapungkan ke kiri, ia secara semula jadi bergerak ke bawah ke "baris" seterusnya apabila mereka mencapai sempadan kanan bekas induknya. Ini berlaku walaupun berkemungkinan mempunyai ruang menegak yang mencukupi tersedia dalam induk, mengakibatkan susun atur yang tidak diingini.

Mengatasi Cabaran

Untuk mencapai penjajaran mendatar yang diingini tanpa limpahan, anda boleh menggunakan teknik pintar yang melibatkan memperkenalkan div dalaman tambahan dalam bekas. Div dalam ini harus mempunyai lebar yang cukup besar untuk menampung semua div anak terapung. Dalam coretan kod CSS dan HTML berikut, teknik ini ditunjukkan:

#container {
  background-color: red;
  overflow: hidden;
  width: 200px;
}

#inner {
  overflow: hidden;
  width: 2000px;
}

.child {
  float: left;
  background-color: blue;
  width: 50px;
  height: 50px;
}

<div>

Dengan menggunakan teknik ini, anda dengan berkesan mencipta bekas maya dengan lebar yang lebih besar, membenarkan anak div terapung ke kiri selama-lamanya dalam sempadan mendatar bekas induk. Limpahan: sifat tersembunyi memastikan div dalam disembunyikan, menyembunyikan apa-apa unsur div berlebihan daripada pandangan.

Penyelesaian ini berkesan menyelesaikan isu div yang bergerak lebih awal ke baris seterusnya, menghasilkan baris mendatar yang dijajar dengan kemas dalam bekas yang ditentukan.

Atas ialah kandungan terperinci Bagaimana untuk Menjajarkan Elemen Div Secara Mendatar dengan Kawalan Limpahan?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!