Tiga baris dan dua lajur biasa berpusatkan susun atur penyesuaian ketinggian_CSS/HTML

Cara memusatkan keseluruhan kandungan halaman dan cara menskala ketinggian secara automatik untuk menyesuaikan diri dengan kandungan. Ini adalah masalah yang paling biasa apabila mempelajari susun atur CSS. Contoh praktikal diberikan di bawah dan dijelaskan secara terperinci. (Pengalaman dan pengalaman dalam artikel ini adalah hasil perbincangan antara xpoint dan guoshuang di Blue Ideal Forum.)

Pertama sekaliKlik di sini untuk melihat kesan berjalan sebenar Halaman ini boleh dipusatkan dan sangat menyesuaikan diri dalam pelayar mozilla, opera dan IE. Mari analisa kod:

Kod penuh

header

class="text">right

1

1

1

1

1

left

footer

>>;


Analisis Kod


Mula-mula kita tentukan kandungan dan baris pertama di bahagian atas #header Kuncinya di sini ialah
text-align:center;
dalam badan dan
margin-kanan: auto;margin. - kiri: auto;, kedua-dua ayat ini menjadikan pengepala berpusat. Nota: Sebenarnya, mentakrifkan text-align:center sudah mencapai pemusatan dalam IE, tetapi ia tidak sah dalam mozilla Anda perlu menetapkan margin:auto;

Seterusnya tentukan dua lajur tengah #kanan dan #kiri. Untuk memusatkan dua lajur tengah, kami meletakkan lapisan #contain di luarnya dan menetapkan margin:auto untuk mengandungi, supaya #kanan dan #kiri secara semula jadi berpusat.

Perhatikan susunan takrifan dua lajur tengah kami mula-mula mentakrifkan #kanan dan biarkan ia terapung di bahagian paling kanan lapisan #contain melalui float: right;. Kemudian takrifkan #kiri dan biarkan ia terapung di sebelah kiri lapisan #kanan melalui terapung: kiri;. Ini betul-betul bertentangan dengan susunan yang kami takrifkan jadual dari kiri ke kanan (Pembetulan: kiri dahulu kemudian kanan, atau pertama kanan kemudian kiri, anda boleh mereka bentuk mengikut keperluan anda sendiri).

Kami melihat bahawa terdapat lapisan #mainbg bersarang di antara #contain dan dua lajur dalam kod untuk apa lapisan ini? Lapisan ini digunakan untuk menentukan latar belakang #contain. Anda pasti akan bertanya, mengapa tidak tentukan latar belakang secara langsung dalam #contain, tetapi tambah lapisan lain? Ini kerana latar belakang yang ditakrifkan secara langsung dalam #contain tidak akan dipaparkan dalam mozilla dan nilai ketinggian mesti ditentukan. Jika nilai ketinggian ditentukan, lapisan #kanan tidak boleh berskala secara automatik mengikut kandungan. Untuk menyelesaikan masalah latar belakang dan ketinggian, perlu menambah lapisan #mainbg sedemikian. Caranya ialah dengan mentakrifkan lapisan #mainbh

float: left;

, kerana float secara automatik memberikan atribut lebar dan ketinggian lapisan. (Mari kita fahami cara ini buat sementara waktu:) Akhir sekali, tentukan lapisan #footer di bahagian bawah. Kunci kepada definisi ini ialah: jelas:keduanya; Fungsi ayat ini adalah untuk membatalkan warisan terapung lapisan #footer. Jika tidak, anda akan melihat #footer dipaparkan di sebelah #header dan bukannya di bawah #kanan.

Selepas lapisan utama ditentukan, susun atur sudah sedia. Satu perkara tambahan: Anda melihat bahawa saya juga mentakrifkan .text{margin:0px;padding:20px;} Fungsi kelas ini ialah untuk mencipta margin 20px di sekeliling kandungan. Mengapa tidak tentukan margin atau padding secara langsung dalam #right? Oleh kerana Mozilla dan IE mempunyai tafsiran yang tidak konsisten terhadap model kotak CSS, mentakrifkan secara langsung margin/padding akan menyebabkan ubah bentuk reka letak dalam Mozilla. Saya biasanya menyelesaikan masalah dengan meletakkan lapisan lain di dalamnya.