ทันใดนั้นฉันก็นึกถึงวิธีนี้เมื่อฉันเขียนเลย์เอาต์สามคอลัมน์ใน CSS สองสามวัน ฉันรู้สึกคลั่งไคล้ความคิดนี้เล็กน้อย หากมีอะไรผิดปกติโปรดให้คำแนะนำกับฉัน
เมื่อฉันต้องการเขียนเค้าโครงสามคอลัมน์โดยทั่วไปฉันจะเลือกใช้วิธีการจัดวาง DIV ต่อไปนี้:
รูปที่ 1 เค้าโครง div
การใช้วิธีการทำรังดังกล่าวสามารถลดความน่าจะเป็นของข้อผิดพลาดของรหัสได้อย่างไม่ต้องสงสัย แต่ในเวลาเดียวกันเค้าโครงนั้นค่อนข้างซับซ้อนและไม่สะดวกเล็กน้อยสำหรับการบำรุงรักษาในภายหลัง เมื่อเราจัดตั้งการนำทางเรามักจะใช้วิธีการซึ่งคือการใช้รายการ 〈ul เพื่อจัดวางและสามารถอธิบายได้ว่าเป็นรูปแบบหลายคอลัมน์ เนื่องจากเป็นกรณีนี้เรายังสามารถใช้ 〈ul เพื่อจัดวางเพจหลายคอลัมน์
รูปที่ 2 เค้าโครง div
นี่คือเค้าโครงความกว้างคงที่ซึ่งหมายความว่าสภาพคล่องไม่แข็งแรง เค้าโครงสภาพคล่องยังไม่ได้รับการทดสอบ ฉันจะลองเมื่อฉันมีเวลา ต่อไปนี้เป็นรหัสสำหรับเค้าโครงนี้:
<! doctype html สาธารณะ -// w3c // dtd xhtml 1.0 transitional // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = เนื้อหาประเภทเนื้อหา = text/html; charset = utf-8″ />
<title> ใช้ UL สำหรับเค้าโครงหลายคอลัมน์ </title>
<style type = text/css>
* {มาร์จิ้น: 0; Padding: 0;}
ร่างกาย {
ความกว้าง: 100%;
ความสูง: 100%;
ความเป็นมา: #DDEDFB;
-
#MainContent {
ความกว้าง: 600px;
มาร์จิ้น: 10px auto;
-
#header,#footer {
ความเป็นมา:#8AC7FA;
ความสูง: 80px;
ชัดเจน: ทั้งสอง;
-
#footer {
ชัดเจน: ทั้งสอง;
Padding-Top: 10px;
-
#เนื้อหา {
ความสูง: 300px;
มาร์จิ้น: 10px auto;
-
#content ul {
รายการสไตล์: ไม่มี;
ความสูง: 100%;
-
#content ul li {
ความกว้าง: 150px;
ความสูง: 100%;
ความเป็นมา:#8AC7FA;
ลอย: ซ้าย;
-
#content ul li#li2 {
ความกว้าง: 280px;
มาร์จิ้น: 0 10px;
-
#content ul li#li2 ul li {
ความกว้าง: 270px;
ความสูง: 140px;
มาร์จิ้น: 5px;
ความเป็นมา:#0581F0;
-
</style>
</head>
<body>
<div id = maincontent>
<div id = header> นี่คือหัว </div>
<div id = เนื้อหา>
<ul>
<li> นี่คือด้านซ้าย </li>
<li id = li2″>
<ul>
<li> นี่คือส่วนบนของกลาง </li>
<li> นี่คือส่วนล่างตรงกลาง </li>
</ul>
</li>
<li> นี่คือสิ่งที่ถูกต้อง </li>
</ul>
</div>
<div id = footer> นี่คือด้านล่าง </div>
</div>
</body>
</html>
รหัสนี้สามารถแสดงได้ตามปกติภายใต้ IE7 และ FF3 เบราว์เซอร์อื่นยังไม่ได้ทดสอบ หากคุณมีวิธีที่ดีกว่าคุณอาจเสนอเช่นกัน