HTML ใช้เค้าโครง 2 คอลัมน์ ความกว้างคงที่ทางด้านซ้าย และแบบปรับได้ทางด้านขวา
การดำเนินการที่หนึ่ง: <style> body, html{padding:0; Margin:0;} // ตามการวางตำแหน่ง CSS ให้ใช้การวางตำแหน่งแบบลอยหรือแบบสัมบูรณ์เพื่อแยกองค์ประกอบบล็อกด้านซ้ายออกจากโฟลว์เอกสารปกติและสามารถวางเคียงข้างกับ div องค์ประกอบบล็อกด้านขวา: ที่ n-type (1) { ลอย: ซ้าย; // ใช้ลอยตัว // ตำแหน่ง: สัมบูรณ์; // ใช้ตำแหน่งที่แน่นอน // ด้านบน: 0; // ความกว้าง: 300px; สีแดง; } // [องค์ประกอบระดับบล็อก เติมความกว้างขององค์ประกอบหลักโดยอัตโนมัติตามค่าเริ่มต้น โดยครอบครองหนึ่งบรรทัด] // ปัจจุบัน: ความกว้างขององค์ประกอบบล็อกด้านขวา = ความกว้างขององค์ประกอบหลัก div:nth-of-type(2){ // ตั้งค่าระยะขอบซ้ายเป็นความกว้างขององค์ประกอบบล็อกด้านซ้าย ขอบซ้าย: 300px; // ตอนนี้: ความกว้างขององค์ประกอบบล็อกด้านขวา = ความกว้างขององค์ประกอบหลัก - ความสูงขอบซ้าย: 220px; พื้นหลัง: สีน้ำเงิน; div> <div >div2</div></html>1) ก่อนตั้งค่าระยะขอบซ้าย
2) หลังจากตั้งค่าระยะขอบซ้ายแล้ว
การดำเนินการที่สอง: <style> body, html{padding:0; margin:0;} // ตามการวางตำแหน่ง CSS ให้ใช้การวางตำแหน่งแบบลอยหรือแบบสัมบูรณ์เพื่อแยกองค์ประกอบบล็อกทางด้านซ้ายออกจากโฟลว์เอกสารปกติ div:nth-of-type(1 ) { float : left; // ใช้ลอยตัว // ตำแหน่ง: สัมบูรณ์; // ใช้ตำแหน่งที่แน่นอน // ด้านบน: 0; // ซ้าย: 300px; FC คือสตรีมเอกสารธรรมดา (ปกติ) บริบทการจัดรูปแบบ พื้นที่การเรนเดอร์ในเพจ และชุดข้อกำหนดการเรนเดอร์ BFC เป็นบริบทการจัดรูปแบบระดับบล็อก // ใช้บริบทการจัดรูปแบบระดับบล็อก BFC เพื่อสร้างคอนเทนเนอร์อิสระที่แยกออกมา div: nth-of-type (2) {// เปลี่ยนค่าของโอเวอร์โฟลว์เป็นมองไม่เห็น ทริกเกอร์ BFC โอเวอร์โฟลว์: ความสูงที่ซ่อนอยู่: 220px; พื้นหลัง: สีน้ำเงิน ; </style><html> <div>div1</div> <div>div2</div></html>ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network