เมื่อใช้วิธีการกำหนดตำแหน่งแบบลอยตัว ความกว้างคงที่และการปรับจากคอลัมน์หนึ่งไปยังหลายคอลัมน์โดยทั่วไปแล้วสามารถเสร็จสิ้นได้อย่างง่ายดาย รวมถึงความกว้างคงที่ของสามคอลัมน์ด้วย ที่นี่เราได้รับข้อกำหนดใหม่ โดยหวังว่าจะมีเค้าโครงแบบสามคอลัมน์ โดยคอลัมน์ด้านซ้ายต้องมีความกว้างคงที่และจะแสดงทางด้านซ้าย คอลัมน์ด้านขวาจะต้องมีความกว้างคงที่และจะแสดงทางด้านขวา และตรงกลาง คอลัมน์จะต้องอยู่ระหว่างคอลัมน์ซ้ายและขวา ตรงกลางของคอลัมน์จะปรับตามการเปลี่ยนแปลงระยะห่างระหว่างคอลัมน์ซ้ายและขวาโดยอัตโนมัติ
สิ่งนี้ทำให้เกิดข้อกำหนดใหม่สำหรับเลย์เอาต์ และไม่สามารถทำได้เพียงแค่ใช้แอตทริบิวต์ลอยตัวและแอตทริบิวต์เปอร์เซ็นต์ ปัจจุบัน CSS ไม่รองรับการคำนวณเปอร์เซ็นต์ที่แม่นยำพอที่จะคำนึงถึงพื้นที่ที่คอลัมน์ซ้ายและขวาครอบครอง ใช้ 100% สำหรับคอลัมน์กลาง สำหรับความกว้าง จะใช้ความกว้างของหน้าต่างเบราว์เซอร์แทนระยะห่างตรงกลางระหว่างคอลัมน์ด้านซ้ายและคอลัมน์ด้านขวา เราจึงต้องคิดปัญหานี้ใหม่
ตำแหน่งที่แน่นอน
ก่อนที่จะเริ่มเค้าโครงสามคอลัมน์ดังกล่าว จำเป็นต้องทำความเข้าใจวิธีการกำหนดตำแหน่งใหม่ - การวางตำแหน่งแบบสัมบูรณ์ วิธีการวางตำแหน่งแบบลอยตัวก่อนหน้านี้ส่วนใหญ่อนุญาตให้เบราว์เซอร์ปรับทิศทางการลอยตัวตามเนื้อหาของวัตถุได้โดยอัตโนมัติ อย่างไรก็ตาม เมื่อวิธีนี้ไม่สามารถตอบสนองความต้องการในการวางตำแหน่งได้ จำเป็นต้องมีวิธีใหม่เพื่อให้บรรลุผล วิธีการกำหนดตำแหน่งคือการกำหนดตำแหน่งแบบสัมบูรณ์ ซึ่งทำได้โดยใช้คุณลักษณะตำแหน่ง
ตำแหน่ง ใช้เพื่อกำหนดวิธีการวางตำแหน่งของวัตถุ ค่าที่มีอยู่: คงที่/สัมบูรณ์/สัมพันธ์
สำหรับทุกออบเจ็กต์บนเพจ คุณสมบัติตำแหน่งเริ่มต้นจะเป็นแบบคงที่ หากคุณตั้งค่าวัตถุเป็นตำแหน่ง:สัมบูรณ์ วัตถุจะแยกออกจากการไหลของเอกสารและจะถูกเปลี่ยนตำแหน่งตามตำแหน่งทั่วทั้งหน้า เมื่อใช้คุณลักษณะนี้ คุณสามารถใช้บน ขวา ล่าง ซ้าย นั่นคือค่าระยะทางในสี่ทิศทางบน ขวา ล่าง และซ้าย เพื่อกำหนดตำแหน่งเฉพาะของวัตถุ ดูดังต่อไปนี้ CSS:
#รูปแบบ {
ตำแหน่ง:แน่นอน;
ด้านบน:20px;
ซ้าย:0px;
}
หาก #layout ใช้ตำแหน่ง:แน่นอน; มันจะกลายเป็นโหมดการวางตำแหน่งสัมบูรณ์ ในเวลาเดียวกัน เมื่อตั้งค่า top:20px; มันจะอยู่ห่างจากด้านบนของหน้าต่างเบราว์เซอร์ 20px เสมอ ในขณะที่ left:0px; ว่าอยู่ห่างจากด้านบนของหน้าต่างเบราว์เซอร์ ขอบด้านซ้ายของเบราว์เซอร์คือ 0px -
หมายเหตุ: หากวัตถุถูกตั้งค่าเป็นตำแหน่ง: แน่นอน มันจะถูกแยกออกจากวัตถุอื่น ๆ โหมดการวางตำแหน่งจะไม่ส่งผลกระทบต่อวัตถุอื่น ๆ และจะไม่ได้รับผลกระทบจากการวางตำแหน่งแบบลอยตัวของวัตถุอื่น ๆ หลังจากใช้แบบสัมบูรณ์ การวางตำแหน่งวัตถุจะลอยอยู่บนเว็บเพจเหมือนเลเยอร์
หลังจากที่วัตถุอยู่ในตำแหน่งที่แน่นอนแล้ว ความสัมพันธ์แบบลอยตัวกับหน้าจะไม่ได้รับการพิจารณาอีกต่อไป คุณจะต้องตั้งค่าทิศทางบน ขวา ล่าง และซ้ายของวัตถุเท่านั้น
ในกรณีนี้ การใช้การวางตำแหน่งแบบสัมบูรณ์สามารถแก้ปัญหาที่เราหยิบยกมาได้ดี ในทำนองเดียวกัน ใช้ 3 div เพื่อสร้างโครงสร้างคอลัมน์ทั้งสามของเรา:
#ซ้าย {
สีพื้นหลัง: #E8F5FE;
เส้นขอบ: 1px ทึบ #A9C9E2;
ความสูง: 400px;
ความกว้าง: 200px;
ตำแหน่ง: แน่นอน;
ด้านบน: 0px;
ซ้าย: 0px;
-
#ขวา {
สีพื้นหลัง: # FFE7F4;
เส้นขอบ: 1px ทึบ #F9B3D5;
ความสูง: 400px;
ความกว้าง: 200px;
ตำแหน่ง: แน่นอน;
ด้านบน: 0px;
ขวา: 0px;
-
ด้วยวิธีนี้ คอลัมน์ด้านซ้ายจะแสดงใกล้กับขอบด้านซ้าย: 0px; ในขณะที่คอลัมน์ด้านขวาจะแสดงทางด้านขวา: 0px; เพื่อให้คอลัมน์ด้านขวาแสดงจากด้านขวา และ #center เข้ามา ตรงกลางจะใช้สไตล์ CSS ธรรมดา:
#ศูนย์ {
สีพื้นหลัง: #F2FDDB;
เส้นขอบ: 1px ทึบ #A5CF3D;
ความสูง: 400px;
ขอบขวา: 202px;
ขอบซ้าย: 202px;
-
สำหรับ #center เราไม่จำเป็นต้องตั้งค่าวิธีการลอยตัว เราเพียงแต่ปล่อยให้มีระยะขอบด้านซ้ายและรักษาความกว้างของ #lef และ #right ไว้เสมอ ซึ่งจะทำให้ได้ความกว้างที่ปรับได้ที่ 202px ทั้งสองด้าน และ ด้านซ้ายและด้านขวามีความกว้างที่ปรับได้ 202px ระยะห่างเพียงอนุญาตให้แสดง #left และ #right ในพื้นที่นี้ จึงบรรลุข้อกำหนด