Bagaimanakah Saya Boleh Membuat Div Ibu Bapa Berkembang agar Sesuai dengan Anaknya yang Berkedudukan Benar?

Mengubah Saiz Ketinggian Div Induk Berdasarkan Div Anak Didudukkan Mutlak

Dalam reka bentuk web, selalunya perlu meletakkan elemen dalam bekas induk dalam fesyen bukan linear. Ini boleh dicapai menggunakan kedudukan mutlak, yang mengalih keluar elemen daripada aliran dokumen biasa. Walau bagaimanapun, isu biasa timbul apabila cuba membuat div induk mengembangkan ketinggiannya untuk menampung kanak-kanak dengan kedudukan mutlak.

Masalah

Pertimbangkan HTML dan CSS berikut:

<div>
<pre class="brush:php;toolbar:false">parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

Dalam senario ini, child2 mempunyai ketinggian dinamik dan sepatutnya muncul di bawah kanak1. Walau bagaimanapun, div induk, #induk, tidak mengembang untuk memasukkan ketinggian anak2.

Penyelesaian

Isu timbul kerana elemen kedudukan mutlak dialih keluar daripada aliran. Akibatnya, mereka diabaikan oleh elemen lain, menyebabkan div induk tidak mempertimbangkan child2 untuk pengiraan ketinggiannya.

Alternatif

Untuk menangani perkara ini, terdapat dua pilihan utama :

• Saiz Semula Manual: Gunakan pendekatan bukan CSS, seperti JavaScript, untuk meletakkan semula div dan melaraskan ketinggian induk secara dinamik.
• Reka Letak CSS: Guna reka letak kotak fleksibel atau grid CSS untuk membalikkan susunan visual elemen. Ini membolehkan kedudukan yang fleksibel sambil mengekalkan aliran elemen.