Penyelidikan tentang reka letak klasik 770px paling sempit dan 1024px_CSS/HTML terluas

Reka letak yang paling tipikal dan praktikal ialah atas, tengah dan bawah, dengan tiga lajur di tengah Contoh ini mempunyai dua ciri:

1. Kesan tiga lajur di bahagian tengah boleh mencapai sebarang warna latar belakang satu lajur.
2. Keseluruhan yang paling sempit ialah 770px dan yang paling lebar ialah 1024px Maksudnya, jika tetingkap lebih kecil daripada 770xp, bar skrol bahagian bawah akan muncul Jika tetingkap lebih besar daripada 1024px, skrin akan dipusatkan secara automatik .

Semak imbas kesan: http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm

Analisis:

Balut paling luar mempunyai semua kandungan bersarang di dalam, dan keseluruhannya diletakkan secara relatif. max min sudah mengawal nilai yang paling sempit dan terluas dengan baik, tetapi ia tidak mempunyai kesan ke atas IE. Jika tiada susun atur lain yang diselang-seli, lapisan ini sebenarnya boleh ditulis dalam badan, menghapuskan satu lapisan bersarang.
#wrapper{ width:auto; jidar: padu; ;}

pengaki pengepala luar bahagian bawah pembalut

Pengepala diletakkan secara mutlak dan pengaki diposisikan secara relatif; jidar luar masing-masing adalah 130px di sebelah kiri dan kanan, yang merupakan kunci kepada keserasian dengan bukan IE.
#luar{ jidar-kiri:130px; tepi-kanan:130px; header{ position:absolute; left:0; height:70px; :center; font-size:xx-large}
#footer { width:100%; kedua-duanya tinggi; ; text-align:center; position:relative;}

bahagian luar bahagian bawah clearheader balut luar kanan lebih jelas

clearheader digunakan untuk mengisi kekosongan dalam header ialah filling hack yang biasa digunakan.

Mengapa lebar balutan luar 99% dan bukannya 100%? Oleh kerana lapisan luar atasnya mempunyai sempadan, 100% lebar ditambah 2 piksel sempadan akan mengembangkannya dan FF mempunyai kesan yang jelas.
Pemprosesan hak adalah sangat klasik Ia diselesaikan sebagai kedudukan di bawah IE dan terapung di bawah FF. Pemprosesan margin negatif juga hanya menggunakan ruang yang ditinggalkan oleh bahagian luar atas.
#clearheader{ ketinggian:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; ; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ height:1px ; overflow:hidden; margin-top:-1px;
Kandungan tengah yang dibiarkan lebih jelas dalam balutan luar adalah sangat mudah, dan ideanya serupa dengan penjelasan di atas.