Bagaimana untuk Membuat Elemen Tengah Mengisi Lebar Baki Bekas dalam CSS?

Mengisi Baki Lebar Bekas dengan CSS

Dalam senario di mana anda mempunyai pengepala dengan tiga elemen yang disusun dalam satu baris, matlamatnya adalah untuk memastikan elemen tengah menduduki ruang yang tinggal dalam pengepala. Untuk mencapai matlamat ini, gabungan paparan blok sebaris dan fungsi calc() dalam CSS terbukti berkesan.

Penyelesaian Kod

Struktur HTML yang disediakan terdiri daripada pengepala yang mengandungi imej, elemen tengah dengan teks dan elemen kanan. Untuk memanipulasi reka letak mereka, kami menggunakan CSS seperti berikut:

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

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

#right {
  background: green;
  display: inline-block;
  width: calc(100% - 100px);
}</code>

Penjelasan

• Sebaris-Blok: Memaparkan elemen sebagai sebaris -blok memastikan ia kekal pada baris yang sama dan berkelakuan seperti elemen blok, membenarkan pelarasan lebar dan ketinggian.
• Fungsi calc(): Fungsi ini melaksanakan operasi matematik pada nilai CSS. Dalam kes ini, kami mengira baki lebar dengan menolak lebar tetap elemen kiri (100px) daripada 100%.

Hasil kod ini ialah elemen tengah meregang untuk mengisi ruang yang tinggal. dalam pengepala, menampung kandungannya sementara elemen yang betul mengekalkan lebarnya 100px.

Penyelesaian Alternatif

Jika anda lebih suka mempunyai ruang antara div, anda boleh ubah suai CSS dengan menetapkan saiz fon elemen luar (pengepala) kepada 0:

<code class="css">header {
  font-size: 0;
  ...
}</code>

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