Buat reka letak halaman tiga lajur dengan CSS floats_Experience exchange

Reka letak tiga lajur pada masa ini merupakan reka letak halaman web yang paling biasa Kandungan halaman utama diletakkan di lajur tengah, dan dua lajur di sebelah diletakkan dengan pautan navigasi dan kandungan lain. Reka letak asas biasanya meletakkan tiga lajur di bawah tajuk, dan tiga lajur menduduki keseluruhan lebar halaman Akhirnya, pengaki diletakkan di bahagian bawah halaman, dan pengaki juga menduduki keseluruhan lebar halaman.

Kebanyakan pereka web biasa dengan teknik reka bentuk web tradisional yang boleh digunakan untuk menjana reka letak dengan jadual, mencipta reka letak lebar tetap atau "cecair" (yang secara automatik menskala dan mengecut berdasarkan lebar penyemak imbas pengguna tetingkap) halaman web.

Sekarang kita semua beralih daripada teknik reka letak berasaskan jadual, ramai pereka bentuk web mencari paradigma baharu penanda XHTML dan pemformatan CSS untuk cara mencipta reka letak tiga lajur. Tidak sukar untuk mendapatkan susun atur lebar tetap daripada CSS menggunakan kedudukan mutlak tetapi mendapatkan susun atur cair adalah sedikit lebih sukar. Oleh itu, artikel ini memperkenalkan kaedah untuk mendapatkan susun atur cecair tiga lajur menggunakan apungan CSS dan sifat jelas.

Kaedah asas
Susun atur asas mengandungi lima div iaitu tajuk, pengaki dan tiga lajur. Pengepala dan pengaki mengambil keseluruhan lebar halaman. Div lajur kiri dan div lajur kanan kedua-duanya adalah lebar tetap, dan atribut apungan digunakan untuk memerahnya ke sisi kiri dan kanan tetingkap penyemak imbas. Lajur tengah sebenarnya menduduki keseluruhan lebar halaman, dan kandungan dalam lajur tengah "mengalir" antara lajur kiri dan kanan. Memandangkan lebar div lajur tengah tidak tetap, ia boleh mengembang dan mengecut mengikut keperluan mengikut perubahan dalam tetingkap penyemak imbas. Sifat padding di sebelah kiri dan kanan div lajur tengah memastikan kandungan disusun dalam lajur yang kemas, walaupun apabila ia terbentang ke bahagian bawah bar sisi (lajur kiri atau kanan).

Contoh reka letak tiga lajur
Sila lihat contoh reka letak tiga lajur menggunakan teknik yang diperkenalkan dalam artikel ini. Contoh ini menggunakan warna terang untuk membezakan pelbagai div reka letak.

Berikut ialah kod XHTML:

Pengepala

Teks sisi port...

Teks sisi kanan...

Teks lajur tengah.. .

Teks pengaki...

Berikut ialah kod CSS:

badan {
margin: 0px;
padding: 0px;
}
div#header {
tinggi: 50px; aqua;
padding:
}
div#left {
lebar: 150px
warna latar: merah; div#kanan {
apungan: kanan;
lebar: 150px;
warna latar: hijau; > jidar: 0 px ;
warna latar: perak;
}
div#footer {
jelas: kedua-duanya; 🎜>