Bagaimana untuk Membuat Baki Lebar Isi Div dalam Bekas Induk?

Mencapai Taburan Lebar Dinamik: Mengisi Baki Lebar Div

Apabila bekerja dengan berbilang div dalam div induk, tugas untuk memastikan satu div mengisi lebar yang tinggal boleh timbul. Teknik ini amat berguna dalam mencipta reka letak responsif yang menampung saiz kandungan yang berbeza-beza.

Dalam kod HTML yang anda berikan, anda mempunyai div induk (#Main) dengan dua div (#div1 dan #div3) dengan lebar tetap dan div ketiga (#div2) yang anda mahu mengisi ruang yang tinggal. Untuk mencapainya, anda boleh menggunakan beberapa kaedah:

Div Terapung:

<style>
    #divMain { width: 500px; }
    #left-div { width: 100px; float: left; }
    #middle-div { float: left; width: calc(100% - 200px); }
    #right-div { width: 100px; float: right; }
</style>

Reka Letak Flexbox:

<style>
    #divMain { 
        display: flex;
        width: 500px; 
    }
    #left-div { width: 100px; }
    #middle-div { flex-grow: 1; }
    #right-div { width: 100px; }
</style>

Susun Letak Grid:

<style>
    #divMain { 
        display: grid;
        grid-template-columns: 100px auto 100px; 
    }
</style>

Atas ialah kandungan terperinci Bagaimana untuk Membuat Baki Lebar Isi Div dalam Bekas Induk?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!