Bagaimana untuk Menjadikan Ketinggian Div Kanak-kanak Terapung Padan dengan Ketinggian Ibu Bapa Mereka?

Mengimbangi Ketinggian Div Anak Terapung untuk Memadankan Ketinggian Ibu Bapa

Pernyataan Masalah:

Dalam halaman dengan struktur HTML berikut:

<div class="parent">
    <div class="child-left floatLeft">
    </div>

    <div class="child-right floatLeft">
    </div>
</div>

Sebagai kandungan daripada div kiri kanak-kanak mengembang, ketinggian div induk betul-betul meningkat. Walau bagaimanapun, ketinggian div kanan kanak-kanak kekal tidak berubah, yang menimbulkan persoalan: bagaimana untuk menyamakan ketinggian anak-hak dengan ibu bapanya?

Penyelesaian:

Untuk menjadikan ketinggian div kanan kanak-kanak sepadan dengan ketinggian induknya, gunakan sifat CSS berikut kepada induk elemen:

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

Sifat ini memastikan elemen induk mempunyai ketinggian yang ditentukan dan mengandungi anak terapung. Seterusnya, tambahkan sifat CSS berikut pada kelas .child-right:

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

Sifat ini memberikan div kanan-kanak kedudukan mutlak, menetapkan ketinggiannya kepada 100% dan meletakkannya pada tepi kanan ibu bapa.

Untuk contoh dan maklumat yang lebih terperinci tentang mencipta lajur ketinggian yang sama, rujuk pautan yang disediakan dalam bahagian rujukan di bawah.

Rujukan:

• [Contoh CSS untuk Lajur Sama Tinggi](pautan ke sumber luaran)
• [Maklumat tentang Ketinggian Sama Lajur](pautan ke sumber luaran)

Atas ialah kandungan terperinci Bagaimana untuk Menjadikan Ketinggian Div Kanak-kanak Terapung Padan dengan Ketinggian Ibu Bapa Mereka?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!