Bagaimanakah Saya Boleh Membuat Dua DIV Anak Terapung Mempunyai Ketinggian Sama?

Menyamakan Ketinggian DIV Anak Terapung

Masalah:

Dalam susun atur halaman dengan DIV induk yang mengandungi dua DIV anak terapung, hanya DIV anak pertama mengembangkan ketinggiannya agar sepadan dengan ketinggian ibu bapa apabila kandungan meningkat di dalamnya. DIV anak kedua kekal pada ketinggian lalainya, meninggalkan penampilan yang tidak sekata.

Penyelesaian:

Untuk memastikan DIV anak kedua (.child-right) mengembang ke ketinggian yang sama seperti induknya, gunakan CSS berikut pada ibu bapa .ibu bapa dan anak .anak-kanan elemen:

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

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

Penjelasan:

• Limpahan tetapan: tersembunyi pada elemen induk menghalang kandungan DIV anak daripada melimpahi batas ibu bapa.
• Menempatkan elemen induk secara relatifnya membolehkan DIV kanak-kanak menggunakan kedudukan mutlak dalam bingkai.
• Lebar tetapan: 100% pada elemen induk memastikan ia mengambil keseluruhan lebar bekasnya.
• Untuk DIV kanak-kanak, ketinggian tetapan: 100% menjadikannya mengembang ke ketinggian daripada induknya.
• lebar: 50% memastikan ia menduduki separuh daripada ibu bapa lebar.
• Kedudukan mutlak menggunakan kanan: 0 dan atas: 0 meletakkan anak DIV di penjuru kanan atas ibu bapa, sejajar dengan tepi kanan.

Dengan menggunakan ini gabungan sifat CSS, DIV anak terapung akan berkembang untuk memadankan ketinggian DIV induknya, menghasilkan taburan ketinggian yang sama antara kedua-dua kanak-kanak.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Dua DIV Anak Terapung Mempunyai Ketinggian Sama?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!