Bagaimana untuk Membahagikan Lebar Skrin Antara Dua Elemen dengan Lebar Tetap dan Fleksibel?

Membahagikan Lebar Skrin Antara Dua Elemen

Dalam reka bentuk web, anda mungkin menghadapi keperluan untuk membahagikan lebar skrin antara dua div, dengan satu mempunyai lebar tetap dan satu lagi menduduki ruang yang tinggal. Begini cara anda boleh mencapainya:

Menggunakan Float dengan Lebar Berdasarkan Peratusan:

Pendekatan ini menggunakan sifat apungan CSS untuk meletakkan div sebelah-menyebelah.

.left {
    float: left;
    width: 83%;
}

.right {
    float: right;
    width: 17%;
}

Perhatikan bahawa lebar ditambah sehingga 100% untuk memastikan bahawa div memenuhi keseluruhan lebar bekas induk.

Menggunakan Flexbox:

Flexbox ialah sistem susun atur yang lebih serba boleh yang membolehkan anda mengawal saiz dan kedudukan elemen menggunakan dimensi fleksibel.

.container {
    display: flex;
}

.left {
    flex: 1;
}

.right {
    width: 250px;
}

Dalam contoh ini, div ".container" ditetapkan untuk dipaparkan sebagai flexbox , dan div ".left" diberi faktor pertumbuhan fleksibel 1, yang membolehkan ia berkembang untuk mengisi ruang yang tinggal selepas div ".right" lebar tetap.

Menggunakan Jadual Paparan :

Anda juga boleh menggunakan paparan: jadual untuk mencipta reka letak dua lajur di mana lajur pertama mempunyai lebar tetap dan lajur kedua menggunakan ruang yang tinggal.

.left {
    display: table-cell;
    width: 250px;
}

.right {
    display: table-cell;
}

Atas ialah kandungan terperinci Bagaimana untuk Membahagikan Lebar Skrin Antara Dua Elemen dengan Lebar Tetap dan Fleksibel?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!