Bagaimana untuk Mencapai Taburan Lebar Berubah dalam Div Bersarang dengan Limpahan: Tersembunyi?

Cara Mencapai Taburan Lebar Pembolehubah dalam Div Bersarang

Dalam xHTML/CSS, adalah perkara biasa untuk menghadapi senario di mana berbilang div bersarang memerlukan untuk dijajarkan secara mendatar, dengan div dalam mempunyai lebar yang berbeza-beza berdasarkan kandungannya. Soalan ini meneroka cabaran biasa: bagaimana untuk memperuntukkan baki ruang mendatar yang tersedia kepada salah satu div dalam apabila lebarnya tidak ditentukan dan bergantung pada kandungannya.

Untuk mencapai kesan ini, kita boleh menggunakan sifat CSS "limpahan: tersembunyi;". Sifat ini menghalang elemen bersebelahan dengan unsur terapung daripada memanjang di belakang terapung, mencipta reka letak terkawal.

Pertimbangkan struktur HTML di bawah:

<div>

Untuk mengkonfigurasi reka letak, CSS berikut boleh digunakan:

#outer {
    overflow: hidden;
    width: 100%;
    border: solid 3px #666;
    background: #ddd;
}

#inner1 {
    float: left;
    border: solid 3px #c00;
    background: #fdd;
}

#inner2 {
    overflow: hidden;
    border: solid 3px #00c;
    background: #ddf;
}

Dengan menetapkan "limpahan: tersembunyi;" pada div "luar", kami memaksa div "inner1" terapung untuk kekal terkandung dalam div "luar". Div "inner2" kemudian mengisi ruang mendatar yang tinggal.

Untuk memastikan reka letak ini berfungsi dalam versi Internet Explorer yang lebih lama (IE 6 dan 7), CSS tambahan berikut boleh digunakan dengan ulasan bersyarat HTML:

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

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

Gaya ini memastikan bahawa div "inner2" mengisi ruang yang tinggal dengan betul dalam IE 6 dan melaraskan margin div "inner1" untuk mengimbangi jurang yang diperkenalkan oleh sifat "zoom".

Dengan konfigurasi ini, div "inner1" akan melaraskan lebarnya secara dinamik berdasarkan kandungannya dan div "inner2" akan menduduki baki lebar yang tersedia, mencipta reka letak di mana div dijajarkan secara mendatar dengan lebar masing-masing.

Atas ialah kandungan terperinci Bagaimana untuk Mencapai Taburan Lebar Berubah dalam Div Bersarang dengan Limpahan: Tersembunyi?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!