Melaksanakan susun atur berpusat modul div tanpa pertukaran float_Experience

Borang susun atur halaman web div+css yang paling biasa: atas, tengah kiri, tengah kanan dan empat modul bawah, dengan lebar 760px dan keseluruhan halaman ditengah.

Kod struktur, empat modul kaki kiri atas kiri semuanya bebas dan tidak bersarang antara satu sama lain.

＜div id="top"＞head＜/div＞

＜div id="left"＞
＜div id="left_module"＞left＜/div＞ 🎜>＜/div＞

＜div id="right"＞
＜div id="right_module"＞right＜/div＞
＜/div＞
>
Atas ialah definisi biasa.

#atas { height:100px; latar belakang:#ccc; width:auto;text-align:center;}

Kaedah A: Bahagian kiri luar ditakrifkan sebagai lebar 760px; dan Berpusat; modul_kiri dalam ditakrifkan sebagai lebar kiri sebenar 280px, dan diposisikan secara mutlak, dan nilai teratas adalah sama dengan ketinggian yang ditakrifkan di bahagian atas.
Kelebihan kaedah ini ialah dua coretan kod modul kiri dan kanan boleh ditukar ganti untuk melaraskan keutamaan paparan.

#left { width:760px; margin:auto;}
#left_module { width:280px; top:100px;}

Kaedah B: Bahagian kiri luar ditakrifkan sebagai 760px lebar dan berpusat, terapung berbanding bahagian atas; modul_kiri dalam ditakrifkan sebagai lebar kiri sebenar 280px, dan diposisikan secara mutlak.
Kelebihan kaedah ini ialah: ketinggian bahagian atas boleh dipanjangkan dengan bebas.

#kiri { width:760px; margin:auto; position:relative;}
#left_module { width:280px; padding:10px;}

Outer right ditakrifkan sebagai lebar dan berpusat 760px, dan modul_kanan dalam ditakrifkan sebagai lebar sebelah kanan sebenar 440px, menggunakan sintaks margin ke kiri. Warna latar belakang yang ditakrifkan oleh right_module ialah warna latar belakang sebelah kanan sebenar, dan ketinggian yang ditentukan ialah ketinggian sebenar modul tengah warna latar belakang sebelah kanan ialah warna latar belakang sebelah kiri sebenar;

#kanan { lebar:760px; latar belakang:#E8E8E8;}
#lebar:440px; :10px;}

Bawah juga tergolong dalam takrifan umum.

#foot { height:100px; latar belakang:#ccc; width:auto;text-align:center;}

Persekitaran ujian IE6.0 dan FF1.5, kedua-duanya Ia adalah sintaks yang paling kasar Ia sangat mudah dan mempunyai kepraktisan yang terhad. Ia boleh digunakan sebagai rujukan teknikal.