Bagaimana untuk Menampung Div Lebar Tetap dan Div Ruang Baki dalam Reka Bentuk Web?

Menampung Div Lebar Tetap dan Baki

Dalam reka bentuk web, cabaran biasa ialah menampung dua div, di mana satu mempunyai lebar tetap tertentu dan satu lagi perlu dinamik menduduki ruang yang tinggal.

Penyelesaian Berasaskan CSS

Satu pendekatan berkesan menggunakan CSS:

.kiri {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">width: 83%;

Salin selepas log masuk

}

.kanan {

width: 16%;

}

Konfigurasi CSS ini memastikan bahawa div .left menduduki 83% daripada lebar yang tersedia, manakala div .right mengambil baki 16%, mengekalkan lebar tetap yang diingini untuk div .left.

Paparan: Kaedah Jadual

Sebagai alternatif, paparan: sifat jadual menawarkan penyelesaian yang berkuasa:

<div class="right"> </div><br><div class="left"></div>

.kiri {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

Salin selepas log masuk