Bagaimanakah Saya Boleh Membuat Div Terapung Berkembang ke Ketinggian Induknya?

Meluaskan Ketinggian Div Terapung untuk Memadankan Induk

Elemen anak terapung boleh mengganggu penjajaran menegak bekas induk. Untuk menangani isu ini dan memastikan ketinggian div kanak-kanak terapung mengembang agar sepadan dengan induknya, ikut langkah berikut:

1. Tetapkan Sifat Induk:

Tambahkan sifat CSS berikut pada elemen induk:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

• limpahan: tersembunyi menghalang unsur anak daripada melimpah di luar bekas induk.
• kedudukan: relatif mewujudkan konteks kedudukan relatif untuk elemen anak.
• lebar: 100% memastikan div induk menempati lebar penuh bekasnya.

2. Konfigurasikan Anak Terapung:

Untuk div anak terapung (mis., .child-right), gunakan sifat CSS berikut:

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

• latar belakang: hijau memberikan warna latar belakang hijau untuk keterlihatan.
• tinggi: 100% menetapkan ketinggian div kanak-kanak agar sepadan dengan ketinggian daripada induknya.
• lebar: 50% mentakrifkan lebar div kanak-kanak sebagai separuh lebar induk.
• kedudukan: mutlak mengalih keluar div anak daripada aliran dokumen biasa dan meletakkannya sepenuhnya dalam bekas induk.
• kanan: 0 menjajarkan div anak ke tepi kanan induk.
• atas: 0 menjajarkan div anak ke tepi atas induk.

Dengan melaksanakan sifat CSS ini, div anak terapung akan mengembangkan ketinggiannya secara automatik agar sepadan dengannya induknya, memastikan reka letak yang dijajarkan secara menegak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Terapung Berkembang ke Ketinggian Induknya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!