Jika kita ingin menambahkan baris footer di akhir layout 3 kolom untuk menaruh informasi seperti hak cipta. Saya mengalami masalah karena harus menyelaraskan bagian bawah 3 kolom. Dalam tata letak tabel, kami menggunakan metode menyusun tabel besar ke dalam tabel kecil, yang dapat dengan mudah menyelaraskan ketiga kolom; dengan tata letak div, ketiga kolom tersebar secara independen dan kontennya memiliki ketinggian yang berbeda, sehingga sulit untuk disejajarkan. Faktanya, kita dapat sepenuhnya menyarangkan div dan menempatkan tiga kolom ke dalam satu DIV untuk mencapai perataan bawah. Berikut ini adalah contoh implementasi (kotak berlatar belakang putih menyimulasikan halaman):
Tubuh
Kode utama halaman contoh ini adalah sebagai berikut:
<div id="tajuk"></div>
<div id="kotak utama">
<div id="menu"></div>
<div id="bilah samping"></div>
<div id="konten"></div>
</div>
<div id="footer"></div>
Style sheet spesifik ditulis di bagian terkait. Poin kuncinya adalah lapisan #mainbox bertumpu pada tiga lapisan: #menu, #sidebar, dan #content. Ketika konten #content bertambah, tinggi #content akan bertambah, dan tinggi #mainbox juga akan meluas, dan lapisan #footer akan otomatis berpindah ke bawah. Ini mencapai tingkat kemampuan beradaptasi yang tinggi.
Perlu juga dicatat bahwa #menu dan #content mengambang di sisi kanan halaman "FLOAT: right;", #sidebar mengambang di sisi kiri lapisan #menu "FLOAT: left;", ini adalah pemosisian metode mengambang, dan Anda juga dapat menggunakan pemosisian Absolut yang digunakan untuk mencapai efek ini.
Masalah lain dari cara ini adalah background sidebar #sidebar tidak bisa 100%. Solusi umumnya adalah mengisinya dengan warna latar belakang tubuh. (Warna latar belakang #mainbox tidak dapat digunakan karena warna latar belakang #mainbox tidak valid di browser seperti Mozilla.)
Oke, rangka utama sudah dibangun, sisa pekerjaan tinggal menambahkan batu bata dan ubin saja. Jika Anda ingin mencoba layout lain, saya sarankan membaca artikel berikut:
16 contoh tata letak CSS
onetab: demonstrasi tata letak komposit tiga kolom
onetab: tata letak tiga kolom yang dapat diregangkan secara bebas
