Pertama, klik di sini untuk melihat efek pengoperasian sebenarnya. Halaman ini dapat dipusatkan dan sangat adaptif di browser mozilla, opera dan IE. Mari kita analisis kodenya:
Kode lengkap
<html>
<kepala>
<gaya tipe="teks/css">
tubuh{
latar belakang:#999;
perataan teks:tengah;
warna: #333;
font-family:arial,verdana,sans-serif;
}
#tajuk{
lebar:776 piksel;
margin-kanan: otomatis;
margin-kiri: otomatis;
bantalan: 0 piksel;
latar belakang: #EEE;
tinggi:60 piksel;
perataan teks:kiri;
} #berisi{
margin-kanan: otomatis;
margin-kiri: otomatis;
lebar: 776 piksel;
} #mainbg{
lebar:776 piksel;
bantalan: 0 piksel;
latar belakang: #60A179;
mengapung: kiri;
}
#Kanan{
mengapung: benar;
margin: 2px 0px 2px 0px;
bantalan:0 piksel;
lebar: 574 piksel;
latar belakang: #ccd2de;
perataan teks:kiri;
}
#kiri{
mengapung: kiri;
margin: 2px 2px 0px 0px;
bantalan: 0 piksel;
latar belakang: #F2F3F7;
lebar: 200 piksel;
perataan teks:kiri;
}
#footer{
jelas: keduanya;
lebar:776 piksel;
margin-kanan: otomatis;
margin-kiri: otomatis;
bantalan: 0 piksel;
latar belakang: #EEE;
tinggi:60 piksel;}
.teks{margin:0px;padding:20px;}
</gaya>
</kepala>
<tubuh>
<div id="header">tajuk</div>
<div id="berisi">
<div id="mainbg">
<div id="kanan">
<div
class="text">kanan<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="kiri">
<div class="text">kiri</div>
</div>
</div>
</div>
<div id="footer">footer</div>
</tubuh>
</html>
Selanjutnya tentukan dua kolom tengah #kanan dan #kiri. Untuk memusatkan dua kolom tengah, kita membuat lapisan #contain di luarnya dan mengatur margin:auto; untuk memuat, sehingga #right dan #left secara alami berada di tengah.
Perhatikan urutan definisi dua kolom tengah. Pertama kita definisikan #right dan biarkan mengapung di sisi paling kanan dari lapisan #contain melalui float: right;. Kemudian tentukan #kiri dan biarkan melayang ke kiri lapisan #kanan melalui float: kiri;. Ini kebalikan dari urutan kita mendefinisikan tabel dari kiri ke kanan (Koreksi: kiri dulu lalu kanan, atau kanan dulu lalu kiri, Anda bisa mendesainnya sesuai kebutuhan Anda sendiri).
Kita melihat ada lapisan #mainbg yang bersarang di antara #contain dan dua kolom dalam kode. Untuk apa lapisan ini? Lapisan ini digunakan untuk menentukan latar belakang #contain. Anda pasti bertanya, kenapa tidak langsung mendefinisikan background di #contain, tapi menambahkan layer lain? Itu karena latar belakang yang ditentukan langsung di #contain tidak akan ditampilkan di mozilla, dan nilai ketinggian harus ditentukan. Jika nilai ketinggian ditentukan, lapisan #kanan tidak dapat secara otomatis menskalakan sesuai dengan konten. Untuk mengatasi masalah latar belakang dan ketinggian, perlu menambahkan lapisan #mainbg seperti itu. Caranya adalah dengan mendefinisikan float: left; untuk layer #mainbh, karena float secara otomatis memberikan atribut lebar dan tinggi layer. (Mari kita pahami seperti ini untuk saat ini :)
Terakhir, tentukan layer #footer di bagian bawah. Kunci dari definisi ini adalah: clear:both;. Fungsi dari kalimat ini adalah untuk membatalkan warisan mengambang dari lapisan #footer. Jika tidak, Anda akan melihat #footer ditampilkan di sebelah #header, bukan di bawah #kanan.
Setelah lapisan utama ditentukan, tata letaknya siap. Satu poin tambahan: Anda melihat bahwa saya juga mendefinisikan .text{margin:0px;padding:20px;}. Fungsi kelas ini adalah untuk membuat margin 20px di sekitar konten. Mengapa tidak mendefinisikan margin atau padding secara langsung di #right? Karena Mozilla dan IE memiliki interpretasi yang tidak konsisten terhadap model kotak CSS, mendefinisikan margin/padding secara langsung akan menyebabkan deformasi tata letak di Mozilla. Saya biasanya menyelesaikan masalah dengan meletakkan lapisan lain di dalamnya.