Tiba-tiba saya memikirkan metode ini ketika saya sedang menulis tata letak tiga kolom di CSS selama beberapa hari. Saya merasa sedikit tergila -gila dengan ide ini. Jika ada yang salah dengan itu, tolong beri saya saran.
Ketika saya perlu menulis tata letak tiga kolom, saya biasanya akan memilih untuk menggunakan metode tata letak div berikut:
Gambar 1 Tata Letak Div
Menggunakan metode sarang seperti itu tidak diragukan lagi dapat mengurangi probabilitas kesalahan kode banyak, tetapi pada saat yang sama, tata letak seperti itu agak rumit dan sedikit tidak nyaman untuk pemeliharaan selanjutnya. Ketika kami tata letak navigasi, kami sering menggunakan metode, yaitu untuk menggunakan daftar 〈UL amar untuk tata letak, dan navigasi dapat digambarkan sebagai tata letak multi-kolom. Karena ini masalahnya, kami juga dapat menggunakan 〈UL indungi untuk tata letak halaman beberapa kolom.
Gambar 2 Tata Letak Div
Ini adalah tata letak lebar tetap, yang berarti likuiditas tidak kuat. Tata letak likuiditas belum diuji. Saya akan mencobanya ketika saya punya waktu. Berikut ini adalah kode untuk tata letak ini:
<! Doctype html public -// w3c // dtd xhtml 1.0 transisi // en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>
<html xmlns = http: //www.w3.org/1999/xhtml>
<head>
<meta http-equiv = konten-tipe konten = teks/html; charset = UTF-8 ″ />
<title> Gunakan ul untuk tata letak multi-kolom </iteme>
<Tipe Gaya = Teks/CSS>
* {margin: 0; padding: 0;}
tubuh {
Lebar: 100%;
Tinggi: 100%;
Latar belakang: #ddedfb;
}
#mainContent {
Lebar: 600px;
Margin: 10px Auto;
}
#header,#footer {
Latar Belakang:#8AC7FA;
Tinggi: 80px;
jelas: keduanya;
}
#footer {
jelas: keduanya;
Padding-top: 10px;
}
#isi {
Tinggi: 300px;
Margin: 10px Auto;
}
#content ul {
List-style: tidak ada;
Tinggi: 100%;
}
#content ul li {
Lebar: 150px;
Tinggi: 100%;
Latar Belakang:#8AC7FA;
float: kiri;
}
#content ul li#li2 {
Lebar: 280px;
margin: 0 10px;
}
#Content ul li#li2 ul li {
Lebar: 270px;
Tinggi: 140px;
margin: 5px;
Latar belakang:#0581f0;
}
</tyle>
</head>
<body>
<Div ID = MainContent>
<Div id = header> Ini adalah kepala </div>
<Div id = Content>
<ul>
<li> Ini adalah yang kiri </li>
<li id = li2 ″>
<ul>
<li> Ini adalah bagian atas dari tengah </li>
<li> Ini adalah bagian bawah di tengah </li>
</ul>
</li>
<li> Ini adalah yang tepat </li>
</ul>
</div>
<Div ID = footer> Ini adalah bagian bawah </div>
</div>
</body>
</html>
Kode ini dapat ditampilkan secara normal di bawah IE7 dan FF3. Browser lain belum mengujinya. Jika Anda memiliki metode yang lebih baik, Anda mungkin juga mengusulkannya.