Bagaimana untuk Meletakkan Dua Div Bersebelahan Menggunakan CSS Floats?

Cara Meletakkan Dua Div Bersebelahan dalam CSS

Dalam CSS, anda boleh meletakkan dua div bersebelahan menggunakan sifat apungan.

Terapung Satu Div

Untuk terapung satu div di sebelah yang lain, tambahkan float: left; harta kepada div yang dikehendaki. Ini akan membuatkan div bergerak ke sebelah kiri pembalut.

#wrapper {
    width: 500px;
    border: 1px solid black;
}
#first {
    width: 300px;
    float: left; /* Float div to the left */
    border: 1px solid red;
}
#second {
    border: 1px solid green;
    overflow: hidden; /* Prevent text wrapping below #first */
}

Mengapungkan Kedua-dua Div

Untuk mengapungkan kedua-dua div bersebelahan antara satu sama lain, tambahkan float : kiri; harta kepada kedua-dua div. Walau bagaimanapun, anda mungkin perlu menambah limpahan: tersembunyi; ke div pembalut untuk menghalang div daripada mengembang melebihi lebar pembalut.

#wrapper {
    width: 500px;
    border: 1px solid black;
    overflow: hidden; /* Prevent floated divs from extending beyond wrapper */
}
#first {
    width: 300px;
    float: left; /* Float div 1 to the left */
    border: 1px solid red;
}
#second {
    float: left; /* Float div 2 to the left */
    border: 1px solid green;
}

Dengan menggunakan sifat apungan ini, anda boleh meletakkan dua div bersebelahan dalam div pembalut. Ketinggian div hijau akan menentukan ketinggian keseluruhan pembalut.

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