Bagaimanakah saya boleh menggunakan CSS `calc()` untuk membuat elemen mengisi lebar baki bekasnya?

Mengisi Lebar Bekas dengan Cekap dalam CSS

Dalam penanda HTML kami, kami mempunyai bar pengepala yang mengandungi tiga elemen: imej, elemen tengah dan elemen kanan. Elemen tengah bertujuan untuk menduduki baki lebar bekas.

Untuk mencapai ini, CSS menyediakan alat yang berkuasa: calc(). Fungsi ini membenarkan pengiraan dinamik panjang berdasarkan ruang yang ada.

Keajaiban terletak pada peraturan CSS berikut:

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

Dalam peraturan ini, lebar elemen #tengah dikira dengan menolak lebar elemen #kiri lebar tetap (100px) daripada jumlah lebar bekas (100%). Ini memastikan elemen tengah memenuhi ruang yang tinggal dengan sempurna.

Ringkasnya, dengan menggunakan calc(), kita boleh melaraskan lebar #tengah secara dinamik berdasarkan ruang bekas yang tersedia, menghasilkan estetika dan sempurna. bar pengepala sejajar.

Atas ialah kandungan terperinci Bagaimanakah saya boleh menggunakan CSS `calc()` untuk membuat elemen mengisi lebar baki bekasnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!