Bagaimana untuk Membuat Div Mengambil Baki Ruang Selepas Div Lebar Tetap?

Cara Melaraskan Dua Div, Satu dengan Lebar Tetap dan Satu Lagi Mengambil Baki Ruang

Apabila bekerja dengan dua bekas div di mana satu memerlukan lebar tertentu dan yang lain harus secara dinamik menduduki ruang yang tinggal, terdapat beberapa pendekatan untuk mencapai susun atur ini. Mari kita terokai dua kaedah:

Menggunakan Paparan: Table atau Table-Cell

Dengan kaedah ini, kami menggunakan ciri paparan CSS untuk mencipta struktur seperti jadual:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.right {
    float: right;
    width: 250px;
    display: table-cell;
    vertical-align: middle;
    height: 100%;
}

.left {
    display: table-cell;
    vertical-align: middle;
    overflow: hidden;
}</code>

Dalam kes ini, div "kanan" mempunyai lebar tetap 250px, manakala div "kiri" menggunakan ruang yang tinggal kerana sifat "overflow: hidden"nya.

Menggunakan Float dan Peratusan Lebar

Pendekatan lain melibatkan penggunaan sifat apungan CSS dan menetapkan lebar div sebagai peratusan:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

<code class="css">.left {
    float: left;
    width: 83%;
    min-height: 50px;
    margin-right: 10px;
}

.right {
    float: right;
    width: 16%;
    min-height: 50px;
    height: 100%;
}</code>

Di sini, div "kiri" menduduki 83% daripada lebar yang tersedia, meninggalkan 16% untuk div "kanan" dengan lebar tetap.

Contoh Demo

Semak keluar demo langsung berikut di JSFiddle untuk melihat kaedah ini dalam tindakan: http://jsfiddle.net/SpSjL/

Atas ialah kandungan terperinci Bagaimana untuk Membuat Div Mengambil Baki Ruang Selepas Div Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!