Melaksanakan susun atur pusat modul tanpa float_CSS/HTML

Mencapai reka letak modul berpusat tanpa float_CSS/HTML

Borang susun atur yang paling biasa dan praktikal: atas, kiri tengah, tengah kanan dan bawah empat modul, lebar 760px, halaman keseluruhan Berpusat.

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

＜p id="top"＞head＜/p＞
＜p id="left"＞  ＜p id="left_module"＞left＜/p＞＜/p＞
＜p id="right"＞  ＜p id="right_module"＞right＜/p＞＜/p＞
＜p id="foot" ＞foot＜/p＞

Bahagian atas tergolong dalam definisi umum.

#top { height:100px; background:#ccc; width:760px; margin: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; ditakrifkan di bahagian atas.
Kelebihan kaedah ini ialah: coretan kod dua modul kiri dan kanan boleh ditukar ganti untuk melaraskan keutamaan paparan.

#left { width:760px; margin:auto;}
  #left_module { width:280px; position:absolute; top:100px; padding:10px;}

Kaedah B: Bahagian kiri luar ditakrifkan sebagai 760px lebar dan berpusat, terapung relatif ke 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.

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

Kanan luar ditakrifkan sebagai lebar dan tengah 760px, dan modul_kanan dalam ditakrifkan sebagai lebar kanan sebenar 440px, menggunakan sintaks margin untuk dipusatkan di sebelah 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;

#right { width:760px; margin:auto; background:#E8E8E8;}
  #right_module { width:440px; background:#F0F0F0; height:360px; margin:0 0 0 auto; padding:10px;}

Bawah juga termasuk di bawah takrifan konvensional.

#foot { height:100px; background:#ccc; width:760px; margin:auto; text-align:center;}

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

Di atas ialah kandungan melaksanakan susun atur pusat modul_CSS/HTML tanpa apungan Untuk kandungan yang lebih berkaitan, sila perhatikan laman web PHP Cina (www.php.cn) !