Bagaimanakah Saya Boleh Membuat Div Ibu Bapa Meluaskan untuk Menampung Kanak-Kanak yang Berkedudukan Benar?

Peluasan Div Ibu Bapa dengan Anak Berposisi Mutlak

Apabila bekerja dengan CSS, kadangkala perlu meletakkan elemen sebelum yang lain pada desktop dan mudah alih peranti. Walau bagaimanapun, kedudukan mutlak mengalih keluar elemen daripada aliran, menjadikannya diabaikan oleh elemen lain.

Dalam senario ini, pertimbangkan HTML dan CSS berikut:

<div>

parent {
    position: relative;
    width: 100%;
}

child1 {
    width: auto;
    margin-left: 160px;
}

child2 {
    width: 145px;
    position: absolute;
    top: 0px;
    bottom: 0px;
}

Dengan persediaan ini, child2 bertujuan untuk diletakkan sebelum child1. Walau bagaimanapun, konfigurasi ini gagal kerana child2 dialih keluar daripada aliran, menyebabkan div induk mengabaikan ketinggiannya. Percubaan untuk menetapkan limpahan:tersembunyi atau menggunakan clearfix pada induk tidak mempunyai kesan.

Isu asasnya ialah elemen kedudukan mutlak tidak dipertimbangkan dalam pengiraan ketinggian bekas induknya. Oleh itu, adalah tidak mungkin untuk menentukan ketinggian ibu bapa berdasarkan kedudukan anak secara mutlak.

Untuk menangani isu ini, dua pilihan tersedia:

• Gunakan Ketinggian Tetap : Tetapkan ketinggian tetap kepada kedua-dua child1 dan child2, memastikan ketinggian div induk mencukupi untuk menampung kedua-duanya.
• Libatkan JavaScript: Gunakan JavaScript untuk meletakkan semula dua div secara dinamik, mengekalkan susunan visual yang diingini dan memastikan ketinggian div induk dilaraskan dengan sewajarnya.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Div Ibu Bapa Meluaskan untuk Menampung Kanak-Kanak yang Berkedudukan Benar?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!