Bagaimanakah Saya Boleh Menjajarkan Div Terapung Secara Mendatar Dalam Bekas Bersaiz Tetap?

Menjajarkan Div Terapung Secara Mendatar

Apabila bekerja dengan div bekas dengan saiz tetap dan limpahan tersembunyi, menjajarkan div terapung secara mendatar boleh menjadi satu cabaran. Secara lalai, div terapung akan membalut ke baris seterusnya apabila mencapai sempadan kanan induknya, walaupun terdapat ruang di atas.

Penampilan yang Diingini

Penampilan yang diingini ialah baris mendatar div dalam bekas, menghalangnya daripada membalut pada berbilang baris. Elemen sebaris dengan ruang putih: no-wrap boleh mencapai ini, tetapi ia tidak sesuai untuk elemen peringkat blok terapung.

Penyelesaian

Untuk menangani perkara ini, anda boleh memperkenalkan div dalam dalam bekas yang mempunyai lebar yang mencukupi untuk menampung semua div terapung. Dengan menetapkan sifat limpahan kepada tersembunyi pada kedua-dua bekas dan div dalam, anda boleh menghalang div daripada tumpah keluar dari kawasan yang ditetapkan.

Kod Contoh

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

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

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

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menjajarkan Div Terapung Secara Mendatar Dalam Bekas Bersaiz Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!