Bagaimana untuk Mengisi Lebar Baki Elemen Bekas dalam CSS?

Mengisi Baki Lebar Bekas dengan CSS

Dalam bidang reka bentuk web, selalunya penting untuk mengisi ruang yang tinggal dalam elemen kontena . Ini amat berguna dalam membuat pengepala atau bar navigasi yang menduduki sebahagian daripada skrin. Mari kita terokai cara untuk mencapai ini menggunakan CSS.

Pertimbangkan coretan kod berikut:

<code class="html"><header>
  <img src="image.jpg" />
  <div id="middle">Middle Element</div>
  <div id="right">Right Element</div>
</header></code>

<code class="css">header {
  background: red;
}

#middle {
  background: orange;
  display: inline-block;
}

#right {
  background: green;
  display: inline-block;
}</code>

Seperti yang anda lihat, div dengan id "tengah" dijangka akan diisi ruang yang tinggal dalam bar pengepala. Mari gunakan CSS untuk merealisasikan perkara ini:

<code class="css">#middle {
  flex: 1; /* New code */
}</code>

Dengan menambahkan flex: 1, anda memberitahu penyemak imbas untuk menggunakan skema saiz yang fleksibel untuk elemen ini, di mana ia mengambil sebanyak mungkin ruang sambil mematuhi kekangan daripada bekasnya.

Nota Tambahan:

• Fungsi calc() boleh digunakan untuk melaksanakan operasi matematik pada nilai CSS. Dalam kes ini, calc(100% - 100px) akan mengira baki lebar bekas selepas div kiri mengambil 100px.
• Sebagai alternatif, anda boleh menetapkan saiz fon: 0 pada elemen luar untuk mengalih keluar sebarang ruang kosong antara elemen sebaris.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Lebar Baki Elemen Bekas dalam CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!