Bagaimana untuk Mengawal Lebar Div Bersarang dengan Kandungan Dinamik?

Div Bersarang dengan Kawalan Lebar Dinamik

Dalam pembangunan web, sukar untuk mengira lebar elemen div dengan tepat apabila kandungannya tidak dapat diramalkan. Isu ini timbul apabila cuba melaraskan lebar satu div secara dinamik berbanding yang lain.

Pernyataan Masalah

Pertimbangkan struktur HTML berikut:

<div>
<p>Matlamatnya adalah untuk menjadikan div #inner2 mengambil ruang mendatar yang tinggal selepas mempertimbangkan lebar div #inner1, yang ditentukan secara dinamik oleh kandungannya.</p>
<p><strong>Penyelesaian</strong></p>
<p>Kunci untuk menyelesaikan isu ini adalah dengan menggunakan limpahan: tersembunyi; Harta CSS. Sifat ini menghalang elemen bersebelahan dengan terapung daripada memanjang di belakang terapung. Dalam kes ini, kita boleh menggunakan sifat ini untuk mengawal lebar div #inner2.</p>
<p><strong>CSS yang dikemas kini</strong>:</p>
<pre class="brush:php;toolbar:false">#outer {
    overflow: hidden;
    width: 100%;
}

#inner1 {
    float: left;
}

#inner2 {
    overflow: hidden;
}

Dengan menetapkan limpahan: tersembunyi; pada div #luar, kami boleh memastikan bahawa div #inner2 tidak melangkaui sempadan induknya. Div #inner2 kemudiannya akan secara automatik menggunakan ruang mendatar yang tinggal.

Nota Tambahan

Untuk menangani keserasian dengan IE 6, peraturan CSS tambahan menggunakan komen bersyarat HTML boleh ditambah:

<!--[if lte IE 6]>
<style type="text/css">
#inner2 {
    zoom: 1;
}

#inner1 {
    margin-right: -3px;
}
</style>
<![endif]-->

Kesimpulan

Dengan menggunakan limpahan: tersembunyi; harta, adalah mungkin untuk melaraskan lebar div bersarang secara dinamik, memastikan bahawa satu div mengambil ruang mendatar yang tinggal selepas mempertimbangkan lebar div lain. Teknik ini boleh berguna dalam pelbagai reka letak web yang memerlukan kawalan tepat ke atas lebar div.