Bagaimana Meletakkan Dua Div Bersebelahan Menggunakan CSS Floats?

Cara Meletakkan Dua Div Bersebelahan

Untuk meletakkan dua elemen div bersebelahan, anda boleh menggunakan pelampung harta dalam CSS.

Dalam div induk (#wrapper), tetapkan lebarnya dan tambahkan jidar untuk visual kejelasan.

#wrapper {
  width: 500px;
  border: 1px solid black;
}

Untuk div pertama (#first), berikan lebar tetap dan gunakan jidar:

#first {
  width: 300px;
  border: 1px solid red;
}

Untuk mengapungkan div pertama kiri, tambahkan yang berikut:

#first {
  ...
  float: left;
}

Biarkan div kedua (#saat) tanpa menyatakan lebar, tetapi berikannya sempadan:

#second {
  border: 1px solid green;
}

Untuk memastikan div kedua menghormati ketinggian div pertama, tambahkan sifat limpahan pada div pembalut:

#wrapper {
  ...
  overflow: hidden;
}

Sebagai alternatif, anda boleh mengapungkan kedua-dua div pertama dan div kedua, tetapi ingat untuk menetapkan sifat limpahan pada div pembalut untuk mengandungi kanak-kanak terapung:

#wrapper {
  ...
  overflow: hidden;
}

#first {
  ...
  float: left;
}

#second {
  ...
  float: left;
}

Atas ialah kandungan terperinci Bagaimana Meletakkan Dua Div Bersebelahan Menggunakan CSS Floats?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!