Typisches höhenadaptives Layout mit drei Zeilen und zwei Spalten in der Mitte

Typisches höhenadaptives Layout mit drei Zeilen und zwei Spalten in der Mitte_CSS/HTML

WBOY

Freigeben： 2016-05-16 12:12:12

Original

1649 Leute haben es durchsucht

So zentrieren Sie den gesamten Seiteninhalt und skalieren die Höhe automatisch, um sie an den Inhalt anzupassen. Dies ist das häufigste Problem beim Erlernen des CSS-Layouts. Im Folgenden wird ein praktisches Beispiel aufgeführt und ausführlich erläutert. (Die Erfahrungen und Erfahrungen in diesem Artikel sind das Ergebnis der Diskussionen zwischen xpoint und guoshuang im Blue Ideal Forum.)

ZuerstKlicken Sie hier, um den tatsächlichen Laufeffekt 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

header< /div>

class="text">right

1< /p>

left

Code-Analyse

Typisches höhenadaptives Layout mit drei Zeilen und zwei Spalten in der Mitte_CSS/HTML

Zuerst definieren wir den Textkörper und die erste Zeile im oberen #Header. Der Schlüssel hier ist der text-align:center; im Textkörper und der margin-right: auto;margin - im Header links: auto;, diese beiden Sätze machen den Header zentriert. Hinweis: Tatsächlich wird durch die Definition von text-align:center; in IE bereits eine Zentrierung erreicht, in Mozilla ist dies jedoch ungültig. Sie müssen margin:auto festlegen, um eine Zentrierung in Mozilla zu erreichen.

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 Reihenfolge der Definition der mittleren beiden Spalten. Wir definieren zuerst #right und lassen es auf der äußersten rechten Seite der #contain-Ebene schweben durch float: right;. 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, die #mainbh-Ebene float: left; zu definieren, da float automatisch die Ebenenattribute Breite und Höhe angibt. (Lassen Sie es uns vorerst so verstehen:)

Zuletzt definieren Sie unten die #footer-Ebene. 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.

Nachdem 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 Margin oder Padding direkt in #right definieren? Da Mozilla und IE inkonsistente Interpretationen des CSS-Box-Modells haben, führt die direkte Definition von Margin/Padding zu einer Layoutverformung in Mozilla. Normalerweise löse ich das Problem, indem ich eine weitere Schicht hineinlege.