Bagaimanakah Saya Boleh Meletakkan Dua Div Bersebelahan dengan Satu Div Mempunyai Lebar Tetap dan Satu Div Mengembang untuk Mengisi Ruang yang Selebihnya?

Meletakkan Dua Div Bersebelahan dalam CSS

Apabila bekerja dengan HTML dan CSS, keperluan untuk meletakkan elemen bersebelahan antara satu sama lain adalah perkara biasa. Artikel ini menyelidiki senario tertentu, di mana matlamatnya adalah untuk mencipta dua div bersebelahan mendatar, dengan satu div dihadkan kepada lebar tertentu manakala satu lagi menempati baki ruang yang tersedia.

Flexbox Solution

Pelayar moden menyokong sifat CSS yang dipanggil flexbox, yang menyediakan kaedah yang berkuasa untuk meletakkan elemen dalam cara yang fleksibel. Untuk mencapai reka letak yang diingini, pertimbangkan untuk menggunakan flexbox. Berikut ialah coretan kod yang menunjukkan pendekatan ini:

<div>
<pre class="brush:php;toolbar:false">#parent {
  display: flex;
}
#narrow {
  width: 200px;
  background: lightblue;
}
#wide {
  flex: 1;
  background: lightgreen;
}

Dalam contoh ini:

• #parent ialah div yang mengandungi yang menetapkan reka letak kotak flex.
• #sempit mempunyai lebar tetap 200px.
• #lebar ditetapkan kepada membesar dan menduduki baki ruang yang tersedia pada skrin, disebabkan oleh kelenturan: 1 sifat.

Dengan menggunakan flexbox, anda boleh membuat div sebelah menyebelah dengan mudah tanpa memerlukan pengiraan lebar yang kompleks atau peraturan CSS tambahan. Penyelesaian ini ringkas dan fleksibel, menjadikannya sesuai untuk pelbagai senario.