Bagaimana untuk Membuat Reka Letak dengan Satu Div Lebar Tetap dan Div Lebar Fleksibel?

Div dengan Taburan Lebar Boleh Ubah

Dalam pembangunan web, selalunya berguna untuk mencipta reka letak di mana dua div berkongsi ruang yang tersedia, tetapi satu div mempunyai lebar tetap.

Soalan:

Bagaimanakah anda boleh melaraskan lebar div supaya satu mengekalkan lebar tetap manakala satu lagi menggunakan ruang yang tinggal?

Penyelesaian:

Untuk mencapainya, ikuti langkah berikut:

1. Struktur HTML:

<code class="html"><div class="right"></div>
<div class="left"></div></code>

2. CSS:

Untuk Div Kanan Lebar Tetap:

<code class="css">.right {
    float: right;
    width: 250px;  // Set your desired fixed width
    min-height: 50px;
    margin-left: 10px;
    border: 2px dashed #00f;
}</code>

Untuk Div Kiri Lebar Fleksibel:

<code class="css">.left {
    overflow: hidden;
    min-height: 50px;
    border: 2px dashed #f0f;
}</code>

3. Nota Tambahan:

• Anda juga boleh menggunakan paparan: jadual dan bukannya terapung untuk keserasian silang penyemak imbas yang lebih baik.
• Laraskan sifat lebar .right berdasarkan keperluan khusus anda .
• Pendekatan ini memastikan bahawa div lebar tetap kekal tidak berubah, manakala div lebar fleksibel melaraskan untuk mengisi ruang yang tinggal.

Atas ialah kandungan terperinci Bagaimana untuk Membuat Reka Letak dengan Satu Div Lebar Tetap dan Div Lebar Fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!