Bagaimanakah Saya Boleh Mencapai Div Bersebelahan dengan Satu Lebar Tetap dan Ruang Lain Mengisi Baki Menggunakan CSS?

Mencapai Div Bersebelahan dalam CSS

Apabila cuba menyusun berbilang div secara mendatar, cabaran untuk menjajarkannya dengan lancar boleh timbul. Artikel ini menyediakan penyelesaian dengan menggunakan CSS flexbox untuk mencapai reka letak optimum yang memaksimumkan penggunaan halaman.

Masalah:

Objektifnya adalah untuk meletakkan dua div bersebelahan, dengan satu div mengekalkan lebar tetap 200px, manakala div lain secara dinamik mengisi skrin yang tinggal ruang.

Penyelesaian:

Kunci kepada reka letak ini ialah flexbox, sifat CSS berkuasa yang membenarkan susunan item yang fleksibel. Begini cara untuk melaksanakannya:

1. Buat div induk dan tetapkan sifat paparannya kepada flex:

   #parent {
     display: flex;
   }

2. Tentukan div lebar tetap dan tentukan divnya lebar:

   #narrow {
     width: 200px;
     background: lightblue; /* Just for visibility */
   }

3. Tambah flex: 1 pada div lain:

   #wide {
     flex: 1; /* Grows to fill remaining space */
     background: lightgreen; /* Just for visibility */
   }

Dengan menggunakan flexbox, anda boleh mencipta susun atur yang dinamik dan fleksibel di mana div diletakkan bersebelahan, mengoptimumkan ruang skrin yang tersedia.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Mencapai Div Bersebelahan dengan Satu Lebar Tetap dan Ruang Lain Mengisi Baki Menggunakan CSS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!