Bagaimana untuk Mengisi Lebar Bekas yang Selebihnya dengan CSS Menggunakan `calc`?

Mengisi Baki Lebar Bekas dengan CSS

Objektifnya adalah untuk memaksimumkan lebar elemen bernama 'tengah' dalam div bekas, membenarkan ia untuk menduduki ruang yang tinggal selepas menampung elemen lain.

Penyelesaian:

Menggunakan sifat CSS 'calc' adalah kunci untuk mencapai ini. Dengan mengira lebar yang tersedia dan menolak lebar tetap elemen lain, kita boleh menentukan lebar yang tinggal secara dinamik.

<code class="css">#middle {
  display: inline-block;
  width: calc(100% - <fixed-element-width>);
}</code>

Dalam contoh yang disediakan:

<code class="html"><div class="left">100 px wide!</div><div class="right">Fills width!</div></code>

Dan CSS:

<code class="css">.left {
  width: 100px;
}
.right {
  width: calc(100% - 100px);
}</code>

Elemen merah mempunyai lebar tetap 100px, manakala elemen biru mengisi ruang yang tinggal selepas mengambil kira lebar tetap.

Sebagai alternatif untuk tidak meninggalkan ruang antara elemen, anda boleh menetapkan saiz fon: 0 pada elemen bekas luar.

Atas ialah kandungan terperinci Bagaimana untuk Mengisi Lebar Bekas yang Selebihnya dengan CSS Menggunakan `calc`?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!