Tutorial pengenalan reka letak halaman web CSS 5: Tutorial adaptive_Basic lebar dua lajur

Bermula dari lebar tetap dua lajur, apabila anda mula mencuba susun atur dua lajur, lebar lajur kiri dan kanan boleh menjadi penyesuaian Daripada susun atur penyesuaian satu lajur, kita tahu bahawa tetapan penyesuaian ditetapkan terutamanya oleh nilai peratusan lebar, jadi dalam dua lajur Reka letak penyesuaian lebar juga menggunakan nilai lebar peratusan Meneruskan kod CSS di atas, kita perlu mentakrifkan nilai lebar lajur kedua:

Salin kod Kod adalah seperti berikut:

#kiri {
warna latar belakang: # E8F5FE;
sempadan: 1px pepejal #A9C9E2;
apungan :
tinggi: 300px; lebar: 20%; : #F2FDDB;
sempadan: 1px pepejal #A5CF3D; lebar lajur kiri ditetapkan kepada 20% daripada lebar, dan lebar lajur kanan ditetapkan kepada 70% daripada lebar %, kelihatan seperti halaman web biasa dengan navigasi di sebelah kiri dan kandungan di sebelah kanan.







Adaptif lebar dua lajur——AA25.CN

Lajur kiri——(AA25.CN)Lajur kanan - penyesuaian lebar dua lajur (AA25.CN) <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title></title> <style type="text/css"> <!-- #left { background-color: #E8F5FE; border: 1px solid #A9C9E2; float: left; height: 300px; width: 20%; } #right { background-color: #F2FDDB; border: 1px solid #A5CF3D; float: left; height: 300px; width: 70%; } --> </style> [Ctrl+A Pilih semua Nota: <div id="left">Jika anda perlu memperkenalkan Js luaran, anda perlu memuat semula untuk melaksanakan </div>]<div id="right"></div> Mengapa tiada lajur kanan Tetapkan kepada 80% untuk mencapai kesan keseluruhan 100%? Sebab masalah ini bermula dengan atribut objek lain Anda masih harus ingat bahawa untuk menjadikan reka letak lebih jelas dalam pratonton, kami menggunakan atribut sempadan supaya kedua-dua objek mempunyai sempadan 1px, manakala dalam CSS. susun atur Dalam , lebar objek bukan sahaja ditentukan oleh nilai lebar Lebar sebenar objek ialah jumlah lebar objek itu sendiri, jidar kiri dan kanan objek, sempadan kiri dan kanan, dan. Oleh itu, Objek di sebelah kiri hendaklah bukan sahaja 20% daripada lebar tetingkap penyemak imbas, tetapi juga lebar sempadan kiri. Dikira dengan cara ini, kedua-dua lajur kiri dan kanan melebihi lebar peratusan mereka sendiri, dan lebar akhir juga melebihi lebar tetingkap penyemak imbas Oleh itu, lajur kanan akan diperah keluar dari baris kedua paparan, sekali gus menggalakkan kesannya pemisahan lajur kiri dan kanan, jadi di sini kita gunakan Ia bukan jumlah lebar 100%. Dalam aplikasi praktikal, kesan mengisi bahagian kiri dan kanan pelayar boleh dicapai dengan mengelakkan penggunaan sempadan dan margin . Isu yang berkaitan dengan pengiraan lebar adalah isu yang sangat penting dalam susun atur CSS yang dipanggil model kotak Ia akan diterangkan secara terperinci dalam tutorial akan datang. Proses pengeluaran contoh ini adalah sama seperti tutorial pengenalan reka letak halaman web CSS 4: Lebar tetap dua lajur, kecuali apabila menetapkan lebar, lebar tetap 200px digantikan masing-masing sebanyak 20% dan 70%, yang akan tidak diterangkan lagi di sini.