หากเราต้องการเพิ่มบรรทัดท้ายกระดาษทั้ง 3 คอลัมน์เพื่อใส่ข้อมูล เช่น ลิขสิทธิ์ ฉันประสบปัญหาในการต้องจัดแนวด้านล่างของ 3 คอลัมน์ ในเค้าโครงตาราง เราใช้วิธีการซ้อนตารางขนาดใหญ่ลงในตารางขนาดเล็ก ซึ่งสามารถจัดแนวคอลัมน์ทั้งสามได้อย่างง่ายดาย ด้วยเค้าโครง div คอลัมน์ทั้งสามจะกระจัดกระจายอย่างอิสระ และเนื้อหามีความสูงต่างกัน ทำให้ยากต่อการจัดแนว ในความเป็นจริง เราสามารถซ้อน div ได้อย่างสมบูรณ์และรวมสามคอลัมน์ไว้ใน DIV เดียวเพื่อให้ได้การจัดตำแหน่งด้านล่าง ต่อไปนี้เป็นตัวอย่างการใช้งาน (กล่องพื้นหลังสีขาวจำลองหน้า):
ร่างกาย
รหัสหลักของหน้าตัวอย่างนี้เป็นดังนี้:
<div id="ส่วนหัว"></div>
<div id="mainbox">
<div id="เมนู"></div>
<div id="แถบด้านข้าง"></div>
<div id="เนื้อหา"></div>
</div>
<div id="ส่วนท้าย"></div>
สไตล์ชีตเฉพาะจะถูกเขียนไว้ในส่วนที่เกี่ยวข้อง ประเด็นสำคัญคือเลเยอร์ #mainbox ซ้อนอยู่ในสามชั้น: #menu, #sidebar และ #content เมื่อเนื้อหาของ #content เพิ่มขึ้น ความสูงของ #content จะเพิ่มขึ้น และความสูงของ #mainbox จะขยายด้วย และเลเยอร์ #footer จะเลื่อนลงโดยอัตโนมัติ สิ่งนี้ทำให้มีความสามารถในการปรับตัวในระดับสูง
นอกจากนี้ยังเป็นที่น่าสังเกตว่า #menu และ #content ลอยอยู่ทางด้านขวาของหน้า "FLOAT: right;" #sidebar ลอยอยู่ทางด้านซ้ายของเลเยอร์ #menu "FLOAT: left;" นี่คือ การวางตำแหน่งวิธีการลอยตัวและคุณยังสามารถใช้การวางตำแหน่งแบบสัมบูรณ์เพื่อให้บรรลุผลนี้
ปัญหาอีกประการหนึ่งของวิธีนี้คือพื้นหลังของแถบด้านข้าง #sidebar ไม่สามารถเป็น 100% ได้ วิธีแก้ไขโดยทั่วไปคือการเติมสีพื้นหลังของร่างกาย (ไม่สามารถใช้สีพื้นหลังของ #mainbox ได้เนื่องจากสีพื้นหลังของ #mainbox ไม่ถูกต้องในเบราว์เซอร์เช่น Mozilla)
โอเค โครงสร้างหลักสร้างเสร็จแล้ว งานที่เหลือก็แค่เติมอิฐและกระเบื้องลงไป หากคุณต้องการลองใช้เลย์เอาต์อื่น ฉันแนะนำให้อ่านบทความต่อไปนี้:
16 ตัวอย่างเค้าโครง CSS
onestab: การสาธิตเค้าโครงแบบรวมสามคอลัมน์
onestab: เค้าโครงสามคอลัมน์ที่ยืดได้อย่างอิสระ
