Bagaimanakah Saya Boleh Membuat Elemen Mengisi Baki Lebar Bekas Menggunakan CSS?

Mengisi Baki Lebar Bekas dengan CSS

Dalam senario tertentu, adalah perlu untuk memperuntukkan baki lebar dalam bekas kepada elemen tertentu . Sebagai contoh, pertimbangkan bar pengepala dengan tiga elemen: imej di sebelah kiri, elemen tengah dan elemen di sebelah kanan. Matlamatnya adalah untuk memastikan elemen "tengah" memenuhi ruang yang tinggal di antara imej dan elemen yang betul.

Mencapai Reka Letak Yang Diingini

Untuk mencapai reka letak yang diingini ini , gunakan kepelbagaian calc() dalam CSS anda. Melaksanakan kod berikut mencontohi pendekatan ini:

HTML:

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

CSS:

<code class="css">.left {
  display: inline-block;
  width: 100px;
  background: red;
  color: white;
}
.right {
  display: inline-block;
  width: calc(100% - 100px);
  background: blue;
  color: white;
}</code>

Dalam kod ini:

• The kelas .kiri dan .kanan diberikan kepada elemen masing-masing.
• paparan: blok sebaris; membolehkan elemen menjajarkan secara mendatar sambil mengalir di sekeliling kandungan lain.
• lebar: menetapkan lebar eksplisit elemen .left sebagai 100 piksel, meninggalkan ruang yang tinggal untuk elemen .right.
• calc (100% - 100px); secara dinamik mengira lebar untuk elemen .kanan dengan menolak 100px (lebar .kiri) daripada 100% (lebar penuh bekas). Nilai ini memastikan elemen .right memenuhi ruang yang tinggal.

Dengan menggunakan teknik ini, elemen .right akan melaraskan lebarnya secara automatik untuk mengisi ruang yang ada, dengan berkesan mencapai reka letak yang diingini.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Membuat Elemen Mengisi Baki Lebar Bekas Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!