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>
<pre class="brush:php;toolbar:false">width: 83%;

}

.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>
<pre class="brush:php;toolbar:false">display: table-cell;
width: 83%;

}

.kanan {

display: table-cell;
width: 16%;

}

Dengan menetapkan memaparkan sifat ke jadual untuk bekas induk dan sel jadual untuk div, penyemak imbas secara berkesan mencipta jadual dua lajur, dengan div lebar tetap muncul dalam satu sel dan ruang yang tinggal mengisi sel yang lain secara dinamik.

Kesimpulan

Kedua-dua CSS dan paparan: kaedah jadual menyediakan penyelesaian yang berkesan untuk masalah menampung div lebar tetap sambil membenarkan div lain menduduki ruang yang tinggal. Pendekatan terbaik bergantung pada keperluan khusus dan pertimbangan keserasian penyemak imbas.

Atas ialah kandungan terperinci Bagaimana untuk Menampung Div Lebar Tetap dan Div Ruang Baki dalam Reka Bentuk Web?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!