Klicken Sie zunächst hier, um den tatsächlichen Betriebseffekt zu sehen. Diese Seite kann in Mozilla-, Opera- und IE-Browsern zentriert und hochgradig anpassungsfähig sein. Lassen Sie uns den Code analysieren:
Vollständiger Code
<html>
<Kopf>
<style type="text/css">
Körper{
Hintergrund:#999;
text-align:center;
Farbe: #333;
Schriftfamilie:arial,verdana,sans-serif;
}
#header{
Breite:776px;
Rand rechts: auto;
margin-left: auto;
Polsterung: 0px;
Hintergrund: #EEE;
Höhe:60px;
text-align:left;
} #enthalten{
Rand rechts: auto;
margin-left: auto;
Breite: 776px;
} #mainbg{
Breite:776px;
Polsterung: 0px;
Hintergrund: #60A179;
schweben: links;
}
#Rechts{
schweben: rechts;
Rand: 2px 0px 2px 0px;
Polsterung:0px;
Breite: 574px;
Hintergrund: #ccd2de;
text-align:left;
}
#links{
schweben: links;
Rand: 2px 2px 0px 0px;
Polsterung: 0px;
Hintergrund: #F2F3F7;
Breite: 200px;
text-align:left;
}
#Fußzeile{
klar:beide;
Breite:776px;
Rand rechts: auto;
margin-left: auto;
Polsterung: 0px;
Hintergrund: #EEE;
Höhe:60px;}
.text{margin:0px;padding:20px;}
</style>
</head>
<Körper>
<div id="header">Header</div>
<div id="contain">
<div id="mainbg">
<div id="right">
<div
class="text">rechts<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div >
</div>
<div id="left">
<div class="text">links</div>
</div>
</div>
</div>
<div id="footer">Fußzeile</div>
</body>
</html>
Als nächstes definieren Sie die beiden mittleren Spalten #right und #left. Um die beiden mittleren Spalten zu zentrieren, verschachteln wir eine Ebene #contain außerhalb davon und setzen margin:auto; auf „contain“, sodass #right und #left natürlich zentriert sind.
Achten Sie auf die Definitionsreihenfolge der mittleren beiden Spalten. Wir definieren zuerst #right und lassen es durch float: right; auf der äußersten rechten Seite der #contain-Ebene schweben. Definieren Sie dann #left und lassen Sie es durch float: left; links von der #right-Ebene schweben. Dies ist genau das Gegenteil der Reihenfolge, in der wir die Tabelle von links nach rechts definiert haben (Korrektur: zuerst links, dann rechts, oder zuerst rechts, dann links, Sie können es nach Ihren eigenen Bedürfnissen gestalten).
Wir sehen, dass zwischen #contain und den beiden Spalten im Code eine Ebene #mainbg verschachtelt ist. Wofür wird diese Ebene verwendet? Diese Ebene wird verwendet, um den Hintergrund von #contain zu definieren. Sie werden sich sicherlich fragen: Warum nicht den Hintergrund direkt in #contain definieren, aber eine weitere Ebene hinzufügen? Das liegt daran, dass der direkt in #contain definierte Hintergrund in Mozilla nicht angezeigt wird und der Höhenwert definiert werden muss. Wenn ein Höhenwert definiert ist, kann die #rechte Ebene nicht automatisch entsprechend dem Inhalt skaliert werden. Um die Hintergrund- und Höhenprobleme zu lösen, ist es notwendig, eine solche #mainbg-Ebene hinzuzufügen. Der Trick besteht darin, float: left; für die Ebene #mainbh zu definieren, da float automatisch die Ebenenattribute Breite und Höhe angibt. (Lassen Sie es uns vorerst so verstehen:)
Definieren Sie abschließend die #footer-Ebene unten. Der Schlüssel zu dieser Definition ist: clear:both;. Die Funktion dieses Satzes besteht darin, die schwebende Vererbung der #footer-Ebene aufzuheben. Andernfalls wird #footer neben #header statt unter #right angezeigt.
Sobald die Hauptebenen definiert sind, ist das Layout fertig. Ein zusätzlicher Punkt: Sie haben gesehen, dass ich auch eine .text{margin:0px;padding:20px;} definiert habe. Die Funktion dieser Klasse besteht darin, einen 20px-Rand um den Inhalt zu erstellen. Warum nicht den Rand oder den Abstand direkt in #right definieren? Da Mozilla und IE inkonsistente Interpretationen des CSS-Box-Modells haben, führt die direkte Definition des Rands/des Abstands zu einer Layoutverformung in Mozilla. Normalerweise löse ich das Problem, indem ich eine weitere Schicht hineinlege.