ใน CSS มีสองวิธีในการใช้เค้าโครงคอลัมน์ วิธีแรกคือการใช้การวางตำแหน่งแบบสัมบูรณ์ (การวางตำแหน่งแบบสัมบูรณ์) ระหว่างตัวเลือกการวางตำแหน่ง CSS สี่แบบ (แบบสัมบูรณ์ คงที่ แบบสัมพันธ์ และแบบคงที่) ซึ่งสามารถลบองค์ประกอบในเอกสารออกจากตำแหน่งเดิมและเปลี่ยนตำแหน่งได้ทุกที่ที่คุณต้องการ ประการที่สองคือการใช้แนวคิด float ใน CSS
สามารถใช้การวางตำแหน่งแบบสัมบูรณ์หรือการลอยตัวเพื่อให้ได้เอฟเฟกต์คอลัมน์ ทั้งสองสามารถใช้อย่างอิสระหรือรวมกันเพื่อเสริมซึ่งกันและกัน
1. การวางตำแหน่งแบบสัมบูรณ์ ข้อดีของการวางตำแหน่งแบบสัมบูรณ์คือเราสามารถควบคุมตำแหน่งขององค์ประกอบใดๆ ได้อย่างแม่นยำ โดยไม่มีการคาดเดาหรือโชคเข้ามาเกี่ยวข้อง เนื่องจากองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะถูกลบออกจากการไหลของเอกสารปกติโดยสิ้นเชิงโดยไม่ทิ้งร่องรอยไว้ จึงไม่มีผลกระทบต่อองค์ประกอบอื่นๆ
ดังนั้น เรามาลองใช้เค้าโครงต่อไปนี้โดยใช้การวางตำแหน่งแบบสัมบูรณ์
นี่คือเค้าโครงแบบสามคอลัมน์และอยู่ตรงกลาง ในจำนวนนั้น คอลัมน์ A คือคอลัมน์เนื้อหาหลัก และคอลัมน์ B และ C เป็นคอลัมน์ด้านข้าง ประการแรก เราไม่สามารถใช้การวางตำแหน่งแบบสัมบูรณ์เพื่อวางตำแหน่งทั้งสามคอลัมน์ A, B และ C ไปที่ตำแหน่งกึ่งกลางได้ เนื่องจากความละเอียดของจอภาพของแต่ละคนจะแตกต่างกัน ผลที่เกิดจากการตั้งศูนย์กลางบนจอภาพที่มีความละเอียด 1024X768 ไม่ทำงานที่ความละเอียดอื่น ๆ ผลกระทบที่เห็นบนจอภาพความเร็วสูงจะไม่อยู่ตรงกลางอย่างแน่นอน
โชคดีที่มีคุณลักษณะที่มีประโยชน์อย่างยิ่งในโมเดลการกำหนดตำแหน่งแบบสัมบูรณ์ นั่นคือ: หากมีการวางตำแหน่งคอนเทนเนอร์ขององค์ประกอบที่มีตำแหน่งที่แน่นอนแล้ว ค่าด้านบนและด้านซ้ายที่ระบุโดยองค์ประกอบจะไม่ขึ้นอยู่กับองค์ประกอบรูท html ของเอกสาร (เช่นเดียวกับมุมซ้ายบนของหน้าต่างเบราว์เซอร์) แต่ออฟเซ็ตจะถูกคำนวณตามมุมซ้ายบนของคอนเทนเนอร์ กล่าวอีกนัยหนึ่ง นั่นคือ: คอนเทนเนอร์ที่อยู่ในตำแหน่งจะทำหน้าที่เป็นจุดเริ่มต้นสำหรับการวางตำแหน่งที่แน่นอนขององค์ประกอบทั้งหมดในนั้น
ดังนั้น เมื่อใช้คุณลักษณะนี้ เราจึงเพิ่มคอนเทนเนอร์ D ไว้ด้านนอกคอลัมน์ A, B และ C ดังที่แสดงด้านล่าง:
จากนั้น เราจัดกึ่งกลางคอนเทนเนอร์ D และเพิ่มแอตทริบิวต์ให้กับมัน: ตำแหน่ง:ญาติ ด้วยวิธีนี้ เราใช้ตำแหน่งที่แน่นอนเพื่อวางตำแหน่งค่าด้านบนและด้านซ้ายของ A, B และ C ตำแหน่งของ A, B และ C จะขึ้นอยู่กับคอนเทนเนอร์ D มีการคำนวณตำแหน่งของมุมซ้ายบน เพื่อให้ได้เอฟเฟกต์การจัดกึ่งกลางคอลัมน์สามคอลัมน์ที่ต้องการ
อย่างไรก็ตาม รูปแบบที่ใช้กันทั่วไปของเรานั้นไม่ง่ายนัก นอกจากสามคอลัมน์แล้ว เรายังต้องมีส่วนหัวและส่วนท้ายอีกด้วย ดังที่แสดงด้านล่าง:
ในขณะนี้ การใช้เค้าโครงที่มีตำแหน่งที่แน่นอนจะไม่ทำงาน เนื่องจากองค์ประกอบที่อยู่ในตำแหน่งที่แน่นอนจะถูกลบออกจากโฟลว์เอกสารโดยสิ้นเชิง ในขณะนี้ ส่วนท้ายจะอยู่ถัดจากส่วนหัวและแสดงอยู่ใต้ส่วนหัว
หากเราต้องใช้การวางตำแหน่งที่แน่นอน เราจะต้องทราบความสูงของคอลัมน์ทั้งสามคอลัมน์ล่วงหน้า จากนั้นจึงวางตำแหน่งส่วนท้ายตามคอลัมน์ที่สูงที่สุด หากไม่สามารถกำหนดความยาวของข้อความในคอลัมน์ใดๆ ได้ นอกเหนือจากการใช้ JavaScript แล้ว เราก็ทำได้เพียงละทิ้งแนวคิดเรื่องการวางตำแหน่งแบบสัมบูรณ์ และลงทุนในรูปแบบลอยตัวแทน
2. การลอยตัว
ความตั้งใจดั้งเดิมของการลอยคือการลอยรูปภาพที่แทรกลงในบทความไปทางซ้ายหรือขวาเพื่อให้ข้อความใต้ภาพล้อมรอบโดยอัตโนมัติเพื่อไม่ให้มีช่องว่างขนาดใหญ่ทางด้านซ้ายหรือ ทางด้านขวาของภาพ
แม้ว่าไวยากรณ์ของการลอยตัวจะเรียบง่าย แต่ก็ไม่ง่ายนักที่จะเชี่ยวชาญ เราจะยกตัวอย่างวิธีใช้การลอยตัวในเลย์เอาต์ ในทำนองเดียวกัน เราจะใช้เค้าโครงสามคอลัมน์พร้อมส่วนท้าย ดังที่แสดงด้านล่าง:
จะใช้ float ได้อย่างไรเพื่อให้ได้เอฟเฟกต์ดังกล่าว? ในความเป็นจริง มันง่ายมาก:
1. ตั้งค่าความกว้างของ E และศูนย์กลาง E
2. ตั้งค่าความกว้างของ A, B และ C และลอย A, B และ C ไปทางซ้ายตามลำดับ
3. ตั้งค่าที่ชัดเจน คุณลักษณะสำหรับส่วนท้าย สิ่ง
ที่ต้องอธิบายก็คือ เค้าโครงแบบลอยตัวยังคงเป็นไปตามโฟลว์เอกสารปกติ ดังนั้น เมื่อเปรียบเทียบกับการวางตำแหน่งแบบสัมบูรณ์ ตำแหน่งของการประกาศองค์ประกอบในไฟล์ต้นฉบับ HTML จึงมีความสำคัญอย่างยิ่งเมื่อวางตำแหน่งแบบลอย แน่นอนว่าวิธีที่ง่ายที่สุดในการแก้ปัญหานี้คือการแลกเปลี่ยนลำดับการประกาศของคอลัมน์ด้านซ้ายและคอลัมน์ด้านขวาในไฟล์ต้นฉบับ นอกจากนี้ยังมีวิธีต่างๆ เพื่อให้ได้เค้าโครงเดียวกันโดยไม่ต้องเปลี่ยนลำดับของคอลัมน์ การใช้การเปรียบเทียบ วิธีคลุมเครือในการใช้ค่ามาร์จิ้นติดลบ ภายใต้สถานการณ์ปกติ ผู้คนมักจะเลือกที่จะสลับลำดับการประกาศในคอลัมน์ด้านซ้ายและคอลัมน์กลางของไฟล์ต้นฉบับ