จู่ๆ ฉันก็นึกถึงวิธีนี้ตอนที่ฉันเขียนเลย์เอาต์สามคอลัมน์ด้วย CSS เมื่อไม่กี่วันก่อน แนวคิดนี้ดูแปลกไปสำหรับฉันเล็กน้อย หากมีอะไรผิดปกติ โปรดให้คำแนะนำแก่ฉันด้วย
เมื่อฉันต้องการเขียนเค้าโครงสามคอลัมน์ ฉันมักจะเลือกใช้วิธีเค้าโครง DIV ต่อไปนี้:
การใช้วิธีการซ้อนดังกล่าวสามารถลดความน่าจะเป็นของข้อผิดพลาดของโค้ดได้อย่างมากอย่างไม่ต้องสงสัย แต่ในขณะเดียวกันเลย์เอาต์ดังกล่าวก็ซับซ้อนเล็กน้อยและไม่สะดวกเล็กน้อยสำหรับการบำรุงรักษาในภายหลัง วิธีการที่เรามักใช้เมื่อจัดวางการนำทางคือการใช้รายการ <ul> สำหรับการจัดวาง การนำทางสามารถอธิบายได้ว่าเป็นเค้าโครงแบบหลายคอลัมน์ ในกรณีนี้ เรายังสามารถใช้ <ul> เพื่อจัดเค้าโครงหน้าได้ เค้าโครงคอลัมน์
นี่คือเลย์เอาต์ที่มีความกว้างคงที่ ซึ่งหมายความว่าเลย์เอาต์ที่ลื่นไหลยังไม่ได้รับการทดสอบ ฉันจะลองอีกครั้งเมื่อฉันมีเวลา
| <!DOCTYPE html สาธารณะ “-//W3C//DTD XHTML 1.0 การเปลี่ยนผ่าน//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=”http://www.w3.org/1999/xhtml”> <หัว> <meta http-equiv=”ประเภทเนื้อหา” content=”text/html; charset=utf-8″ /> <title>การใช้ UL สำหรับเค้าโครงหลายคอลัมน์</title> <style type="text/css"> * {ระยะขอบ:0; การขยาย:0;} ร่างกาย { ความกว้าง:100%; ความสูง:100%; พื้นหลัง:#ddedfb; - #เนื้อหาหลัก { ความกว้าง:600px; ระยะขอบ:10px อัตโนมัติ; - #ส่วนหัว#ส่วนท้าย { พื้นหลัง:#8AC7FA; ความสูง:80px; ชัดเจน:ทั้งสอง; - #ส่วนท้าย { ชัดเจน:ทั้งสอง; ช่องว่างด้านบน: 10px; - #เนื้อหา { ความสูง:300px; ระยะขอบ:10px อัตโนมัติ; - #เนื้อหา { รายการสไตล์: ไม่มี; ความสูง:100%; - #เนื้อหาตุลลี{ ความกว้าง:150px; ความสูง:100%; พื้นหลัง:#8AC7FA; ลอย:ซ้าย; - #contentulli#li2 { ความกว้าง:280px; ระยะขอบ:0 10px; - #content ul li#li2 ul li { ความกว้าง:270px; ความสูง:140px; ระยะขอบ:5px; พื้นหลัง:#0581F0; - </สไตล์> </หัว> <ร่างกาย> |
รหัสนี้สามารถแสดงได้ตามปกติภายใต้ IE7 และ FF3 ยังไม่ได้รับการทดสอบบนเบราว์เซอร์อื่น หากคุณมีวิธีที่ดีกว่า โปรดแนะนำ