Das typischste und praktischste Layout ist oben, in der Mitte und unten mit drei Spalten in der Mitte. Dieses Beispiel weist zwei Merkmale auf:
1. Der Drei-Spalten-Effekt in der Mitte kann jede einspaltige Hintergrundfarbe erzielen.
2. Die schmalste Gesamtgröße beträgt 770 Pixel, das heißt, wenn das Fenster kleiner als 770 Pixel ist, wird die untere Bildlaufleiste automatisch zentriert .
Durchsuchen Sie den Effekt: http://www.rexsong.com/blog/attachments/200512/29_154158_minmax_3col.htm
Analyse:
Im äußersten Wrapper ist der gesamte Inhalt verschachtelt und das Ganze ist relativ positioniert. max min steuert die engsten und breitesten Werte bereits sehr gut, hat aber keine Auswirkung auf den IE. Wenn keine anderen Layouts dazwischen liegen, kann diese Ebene tatsächlich in den Körper geschrieben werden, wodurch eine Verschachtelungsebene entfällt.
#wrapper{ width:auto; border:1px; min-width:1024px; margin-right:auto; ;}
Wrapper untere äußere Kopfzeile und Fußzeile
Die Kopfzeile ist absolut positioniert und die Fußzeile ist relativ positioniert. Die äußeren Ränder betragen links bzw. rechts 130 Pixel, was der Schlüssel zur Kompatibilität mit Nicht-IE ist.
#outer{ margin-left:130px; border-left:1px solid #000;🎜># header{ position:absolute; left:0; height:70px; border-bottom:1px; overflow:#0ff; :center; Schriftgröße:xx-large>#footer { width:100%; border-top:1px solid #000; ; text-align:center; position:relative;}
äußere untere Ebene, klare Kopfzeile, äußere Umhüllung rechts, klarer
clearheader wird verwendet, um die Lücken im Header zu füllen. Clearer ist ein häufig verwendeter Füll-Hack.
Warum beträgt die Außenwickelbreite 99 % statt 100 %? Da die obere äußere Ebene einen Rand hat, wird sie durch 100 % Breite plus 2 Randpixel erweitert, und FF hat offensichtliche Auswirkungen.Die Verarbeitung von rechts ist sehr klassisch. Sie wird als Positionierung unter IE und als Floating unter FF aufgelöst. Die Verarbeitung negativer Ränder nutzt ebenfalls nur den Platz, der vom oberen Rand übrig bleibt.
#clearheader{ height:72px;}
.outerwrap { float:left; width:99%;}
#right {
position:relative;
width:130px; float:right ; left:1px;
margin-right:-129px;
}
* html #right { margin-right:-130px; margin-left:-3px}
.clearer{ height:1px ; overflow:hidden; margin-top:-1px; clear:both;}
Der Mittelinhalt, der im Outerwrap klarer bleibt, ist sehr einfach und die Idee ähnelt der obigen Erklärung.
