Saya tiba-tiba memikirkan metode ini ketika saya sedang menulis tata letak tiga kolom dengan CSS beberapa hari yang lalu. Ide ini sepertinya agak gila bagi saya. Jika ada yang salah dengan itu, silakan beri saya saran.
Ketika saya perlu menulis tata letak tiga kolom, saya biasanya memilih untuk menggunakan metode tata letak DIV berikut:
Menggunakan metode bersarang seperti itu tidak diragukan lagi dapat mengurangi banyak kemungkinan kesalahan kode, tetapi pada saat yang sama, tata letak seperti itu juga sedikit rumit dan sedikit merepotkan untuk pemeliharaan selanjutnya. Metode yang sering kita gunakan saat menata letak navigasi adalah dengan menggunakan daftar
Ini adalah tata letak dengan lebar tetap, artinya tidak terlalu lancar. Tata letak yang lancar belum diuji. Saya akan mencobanya lagi ketika saya punya waktu. Tempelkan kode tata letak ini di bawah.
| * {margin:0; bantalan:0;} tubuh { lebar:100%; tinggi:100%; latar belakang:#ddedfb; } #Konten Utama { lebar:600 piksel; margin:10px otomatis; } #header,#footer { latar belakang:#8AC7FA; tinggi:80 piksel; jelas: keduanya; } #footer { jelas: keduanya; padding-atas:10px; } #isi { tinggi:300 piksel; margin:10px otomatis; } #konten { gaya daftar: tidak ada; tinggi:100%; } #kontenulli{ lebar:150 piksel; tinggi:100%; latar belakang:#8AC7FA; mengapung:kiri; } #contentulli#li2 { lebar:280 piksel; margin:0 10 piksel; } #konten ul li#li2 ul li { lebar:270 piksel; tinggi:140 piksel; margin:5 piksel; latar belakang:#0581F0; } |
Kode ini dapat ditampilkan secara normal di IE7 dan FF3. Kode ini belum diuji di browser lain. Jika Anda memiliki metode yang lebih baik, mohon sarankan.