การใช้ตำแหน่งลอยตัวความกว้างคงที่และความสามารถในการปรับตัวจากคอลัมน์หนึ่งไปยังคอลัมน์หลายคอลัมน์สามารถทำได้โดยทั่วไปง่ายๆรวมถึงความกว้างคงที่ของคอลัมน์สามคอลัมน์ ที่นี่เราได้หยิบยกข้อกำหนดใหม่โดยหวังว่าจะมีเลย์เอาต์สามคอลัมน์ซึ่งคอลัมน์ด้านซ้ายต้องการความกว้างคงที่และจะแสดงทางด้านซ้ายคอลัมน์ด้านขวาต้องใช้ความกว้างคงที่และแสดงทางด้านขวาและตรงกลาง คอลัมน์จะต้องอยู่ในคอลัมน์ซ้ายและคอลัมน์ด้านขวา สิ่งนี้นำไปสู่ข้อกำหนดใหม่สำหรับเค้าโครงและเพียงแค่ใช้แอตทริบิวต์ Float และไม่สามารถทำได้ ใช้สำหรับคอลัมน์กลางสำหรับความกว้างมันจะใช้ความกว้างของหน้าต่างเบราว์เซอร์แทนที่จะระยะห่างกลางระหว่างคอลัมน์ซ้ายและขวาดังนั้นเราจึงต้องคิดใหม่เกี่ยวกับปัญหานี้ #layout { ถ้า Layout ใช้ตำแหน่ง: Absolute; มาร์จิ้นซ้ายคือ 0px - ด้วยวิธีนี้คอลัมน์ด้านซ้ายจะปรากฏขึ้นที่ด้านซ้ายของขอบซ้ายในขณะที่คอลัมน์ด้านขวาจะแสดงทางด้านขวาโดยด้านขวา: 0px; สำหรับ #Center เราไม่จำเป็นต้องตั้งค่าวิธีการลอยตัวอีกต่อไป ระยะทางด้านซ้ายและขวาเพียงแค่อนุญาตให้ #left และ #right แสดงในพื้นที่นี้ดังนั้นจึงเป็นไปตามข้อกำหนด
การวางตำแหน่งสัมบูรณ์
ก่อนที่จะเริ่มรูปแบบสามคอลัมน์เช่นนั้นจำเป็นต้องเข้าใจวิธีการวางตำแหน่งใหม่ - การวางตำแหน่งสัมบูรณ์ วิธีการลอยตัวแบบลอยตัวก่อนหน้านี้ส่วนใหญ่จะถูกปรับโดยเบราว์เซอร์โดยอัตโนมัติตามเนื้อหาของวัตถุ การวางตำแหน่งและการวางตำแหน่งสัมบูรณ์ทำได้โดยใช้แอตทริบิวต์ตำแหน่ง
ตำแหน่งที่ใช้ในการตั้งค่าที่มีอยู่สำหรับการวางตำแหน่งวัตถุ: คงที่/สัมบูรณ์/สัมพัทธ์
สำหรับทุกวัตถุในหน้าคุณสมบัติตำแหน่งเริ่มต้นจะคงที่ หากคุณตั้งค่าวัตถุเป็นตำแหน่ง: สัมบูรณ์วัตถุจะถูกแยกออกจากสตรีมเอกสารและจัดตำแหน่งใหม่ตามตำแหน่งของหน้าทั้งหมด เมื่อใช้คุณสมบัตินี้คุณสามารถใช้ด้านบนขวาล่างซ้ายนั่นคือค่าระยะทางของสี่ทิศทางของส่วนบนขวาล่างและซ้ายเพื่อกำหนดตำแหน่งเฉพาะของวัตถุ
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 20px;
ซ้าย: 0px;
-
หมายเหตุ: หากวัตถุถูกตั้งค่าเป็นตำแหน่ง: Absolute; การวางตำแหน่งสัมบูรณ์วัตถุลอยอยู่บนหน้าเว็บเช่นเลเยอร์
หลังจากการวางตำแหน่งอย่างแน่นอนวัตถุจะไม่ได้รับการพิจารณาด้วยความสัมพันธ์แบบลอยตัวในหน้าอีกต่อไป
ในกรณีนี้การใช้ตำแหน่งสัมบูรณ์สามารถแก้ปัญหาที่เรายกได้ดี ในทำนองเดียวกันเราใช้ 3 divs เพื่อสร้างโครงสร้างคอลัมน์สามคอลัมน์ของเรา:
#ซ้าย {
พื้นหลังสี: #e8f5fe;
ชายแดน: 1px Solid #A9C9E2;
ความสูง: 400px;
ความกว้าง: 200px;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px;
ซ้าย: 0px;
-
#ขวา {
พื้นหลังสี: #ffe7f4;
ชายแดน: 1px Solid #F9B3D5;
ความสูง: 400px;
ความกว้าง: 200px;
ตำแหน่ง: สัมบูรณ์;
ด้านบน: 0px;
ขวา: 0px;
-
#ศูนย์ {
พื้นหลังสี: #F2FDDB;
ชายแดน: 1px Solid #A5CF3D;
ความสูง: 400px;
มาร์จิ้น-ขวา: 202px;
ขอบซ้าย: 202px;
-