Bagaimanakah Saya Boleh Menggunakan CSS Flexbox untuk Meletakkan Dua Div Bersebelahan, Satu dengan Lebar Tetap dan Satu lagi Mengisi Ruang yang Selebihnya?

Membentang Dua Div Bersebelahan Menggunakan CSS

Dalam pembangunan web, menjajarkan elemen secara bersebelahan boleh menjadi penting untuk mencipta reka letak yang menarik secara visual. Soalan ini meneroka cara meletakkan dua div bersebelahan antara satu sama lain, dengan div kanan mempunyai lebar tetap dan div kiri mengisi lebar skrin yang tinggal.

Untuk mencapai ini, jawapan mencadangkan menggunakan kotak fleksibel harta benda. Flexbox menyediakan cara yang fleksibel untuk mengagihkan ruang antara elemen dan disokong secara meluas dalam penyemak imbas moden.

Penyelesaian melibatkan penetapan sifat paparan bekas induk kepada lentur. Ini memberitahu penyemak imbas untuk menganggap elemen anak sebagai item fleksibel dalam reka letak induk.

Untuk div kanan dengan lebar tetap, sifat lebar ditetapkan kepada 200px. Untuk div kiri, sifat flex ditetapkan kepada 1, menunjukkan bahawa ia sepatutnya mengambil semua ruang yang tinggal dalam bekas.

Selain itu, warna latar belakang telah diperuntukkan kepada setiap div untuk menunjukkan perwakilan visualnya dalam reka letak .

Dengan melaksanakan penyelesaian ini, pembangun boleh menyelaraskan div sebelah menyebelah dengan mudah, membolehkan reka letak yang fleksibel dan responsif yang menyesuaikan diri dengan pelbagai skrin saiz.

Atas ialah kandungan terperinci Bagaimanakah Saya Boleh Menggunakan CSS Flexbox untuk Meletakkan Dua Div Bersebelahan, Satu dengan Lebar Tetap dan Satu lagi Mengisi Ruang yang Selebihnya?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!