HTML mengimplementasikan tata letak 2 kolom, lebar tetap di sebelah kiri dan adaptif di sebelah kanan
Implementasi satu: <style> body, html{padding:0; margin:0;} // Menurut pemosisian CSS, gunakan pemosisian mengambang atau absolut untuk memisahkan elemen blok kiri dari alur dokumen biasa dan dapat disandingkan dengan div elemen blok kanan: nth-of -type(1){ float: kiri; //Gunakan mengambang // posisi: absolut; //Gunakan pemosisian absolut // atas: 0 // kiri: 0; merah; } // [Elemen tingkat blok, secara otomatis mengisi lebar elemen induk secara default, menempati satu baris] // Saat ini: lebar elemen blok kanan = lebar elemen induk div:nth-of-type(2){ // Tetapkan margin-kiri ke lebar elemen blok kiri. margin-left: 300px; // Sekarang: lebar elemen blok kanan = lebar elemen induk - tinggi margin-kiri: 220px latar belakang: biru; div> <div >div2</div></html>1) Sebelum mengatur margin-kiri
2) Setelah mengatur margin-kiri
Implementasi dua: <style> body, html{padding:0; margin:0;} // Menurut pemosisian CSS, gunakan pemosisian mengambang atau absolut untuk memisahkan elemen blok di sebelah kiri dari alur dokumen biasa div:nth-of-type(1 ){ float : kiri; //Gunakan posisi mengambang //: absolut; //Gunakan posisi absolut // atas: 0; // kiri: 0; FC adalah aliran dokumen biasa (biasa), konteks pemformatan, area rendering di halaman, dan serangkaian spesifikasi rendering. BFC adalah konteks pemformatan tingkat blok. // Gunakan konteks pemformatan tingkat blok BFC untuk membuat kontainer independen yang terisolasi div:nth-of-type(2){ // Ubah nilai overflow menjadi tidak terlihat, memicu BFC overflow:hidden: 220px background: blue ; }</gaya><html> <div>div1</div> <div>div2</div></html>Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.