Bagaimanakah Saya Boleh Membahagikan Ruang Secara Berkadaran Antara Dua Div dengan Lebar Tetap?

Dua Div, Membahagikan Ruang Secara Berkadaran

Dalam halaman web, anda mungkin menghadapi senario di mana anda mempunyai dua bekas div, satu dengan lebar tetap dan satu lagi yang hendaklah menempati baki ruang yang ada. Mengkonfigurasi persediaan ini dengan berkesan boleh menjadi penting untuk reka bentuk reka letak responsif.

Untuk mencapai ini, anda boleh menggunakan pelbagai teknik CSS. Berikut ialah dua kaedah yang biasa digunakan:

Kaedah 1: Menetapkan Sifat Lebar

Tetapkan lebar khusus untuk div lebar tetap dan gunakan fungsi calc() untuk mengira lebar div lain dengan sewajarnya. Pastikan nilai dalam fungsi calc() mempertimbangkan lebar div lebar tetap, sebarang jidar atau padding, dan perkadaran ruang yang tinggal yang dikehendaki.

Kaedah 2: Menggunakan Paparan:jadual dan Display:table-cell

Manfaatkan paparan: jadual dan paparan: sifat sel jadual untuk mencipta reka letak seperti jadual. Tetapkan sifat lebar untuk div lebar tetap dan laraskan lebar div lain dengan menyatakan nilai peratusan. Nilai peratusan akan menentukan bahagian baki ruang yang sepatutnya didudukinya.

Contoh Kod:

Rujuk kepada contoh kod HTML dan CSS di bawah, di mana div kanan (dengan kelas kanan) mempunyai lebar tetap 250px dan div kiri (dengan kelas kiri) menggunakan ruang yang tinggal.

HTML:

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

CSS:

<code class="css">.left {
  overflow: hidden;
  min-height: 50px;
  border: 2px dashed #f0f;
}

.right {
  float: right;
  width: 250px;
  min-height: 50px;
  margin-left: 10px;
  border: 2px dashed #00f;
}</code>

Dengan menggunakan teknik ini, anda boleh membahagikan ruang dengan berkesan antara dua bekas div, membolehkan anda membuat reka letak web yang fleksibel dan responsif.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membahagikan Ruang Secara Berkadaran Antara Dua Div dengan Lebar Tetap?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!