So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

So zentrieren Sie den gesamten Seiteninhalt und passen die Höhe automatisch an den Inhalt an. Dies ist das häufigste Problem beim Erlernen von CSS-Layout. Nachfolgend finden Sie ein praktisches Beispiel mit anschließender ausführlicher Erläuterung.

Klicken Sie zunächst hier, um den tatsächlichen Laufeffekt zu sehen. Diese Seite kann in den Browsern Mozilla, Opera und IE zentriert und hochgradig adaptiv sein. Lassen Sie uns den Code analysieren:

Code kopieren

Der Code lautet wie folgt:

<html>
<Kopf>
<style type="text/css">
Körper{
Hintergrund:#999;
Textausrichtung: zentriert;
Farbe: #333;
Schriftfamilie: Arial, Verdana, Sans-Serif;
}
#header{
Breite: 776px;
Rand rechts: automatisch;
Rand links: automatisch;
Polsterung: 0px;
Hintergrund: #EEE;
Höhe: 60px;
Textausrichtung: links;
} #enthalten{
Rand rechts: automatisch;
Rand links: automatisch;
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;
Textausrichtung: links;
}
#links{
schweben: links;
Rand: 2px 2px 0px 0px;
Polsterung: 0px;
Hintergrund: #F2F3F7;
Breite: 200px;
Textausrichtung: links;
}
#Fußzeile{
klar: beides;
Breite: 776px;
Rand rechts: automatisch;
Rand links: automatisch;
Polsterung: 0px;
Hintergrund: #EEE;
Höhe: 60px;}
.text{margin:0px;padding:20px;}
</Stil>
</Kopf>
<Text>
<div id="header">Kopfzeile</div>
<div id="enthalten">
<div id="mainbg">
<div id="rechts">
<div
class="text">rechts<p>1</p><p>1</p><p>1</p><p>1</p><p>1</p></div>
</div>
<div id="links">
<div class="text">links</div>
</div>
</div>
</div>
<div id="footer">Fußzeile</div>
</body>
</html>

Code-Analyse:
Zuerst definieren wir den Body und die erste Zeile #header ganz oben. Der Schlüssel dabei ist text-align:center; im Body und margin-right: auto;margin-left: auto; im Header. Diese beiden Sätze zentrieren den Header. Hinweis: Tatsächlich hat die Definition von text-align:center; bereits eine Zentrierung im Internet Explorer erreicht, ist aber in Mozilla 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 von ihnen und setzen margin:auto; für contain, sodass #right und #left natürlich zentriert sind.
Beachten Sie die Reihenfolge, in der die beiden mittleren Spalten definiert werden. Wir definieren zuerst #right und verwenden float: right;, um es ganz rechts in der Ebene #contain schweben zu lassen. Definieren Sie dann #left und verwenden Sie float: left;, um es links von der Ebene #right schweben zu lassen. Dies ist genau das Gegenteil der Reihenfolge, in der wir die Tabelle zuvor von links nach rechts definiert haben (Korrektur: Es kann entweder zuerst links und dann rechts oder zuerst rechts und dann links implementiert werden; gestalten Sie es nach Ihren Anforderungen).

Wir können 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 fragen sich vielleicht, warum der Hintergrund nicht direkt in #contain definiert wird, anstatt eine zusätzliche Ebene hinzuzufügen? Das liegt daran, dass der direkt in #contain definierte Hintergrund in Mozilla nicht angezeigt wird und daher der Höhenwert definiert werden muss. Wenn ein Höhenwert definiert ist, kann die rechte Ebene nicht automatisch basierend auf 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; in der Ebene #mainbh zu definieren, da float der Ebene automatisch Breiten- und Höhenattribute zuweist. (Verstehen wir es vorerst so:)

Schließlich definiert die Ebene #footer den unteren Teil. Der Schlüssel zu dieser Definition lautet: clear:both;, wodurch die schwebende Vererbung der Ebene #footer aufgehoben wird. Andernfalls wird #footer direkt neben #header angezeigt, anstatt unter #right.
Nachdem die Hauptebenen definiert sind, ist das Layout fertig. Eine weitere Ergänzung: Sie können sehen, dass ich auch eine .text{margin:0px;padding:20px;} definiert habe. Der Zweck dieser Klasse besteht darin, einen 20px großen Leerraum um den Inhalt herum zu erstellen. Warum definieren Sie Ränder oder Innenabstände nicht direkt in #right? Da Mozilla und IE das CSS-Boxmodell unterschiedlich interpretieren, führt die direkte Definition von Rändern/Innenabständen zu Layoutverzerrungen in Mozilla. Normalerweise löse ich dieses Problem, indem ich innen eine weitere Schicht hinzufüge.

<<: Docker installiert MySQL und löst das chinesische verstümmelte Problem

>>: MySQL-Serie Multi-Table Join Abfrage 92 und 99 Syntaxbeispiele ausführliches Tutorial

So übertragen Sie Dateien zwischen Docker-Container und lokalem Computer

Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung auf das Erlernen der Front-End-Leistungsoptimierung.

Artikel

Analyse des Implementierungsprozesses für die Tomcat maxPostSize-Einstellung

So zentrieren Sie den gesamten Seiteninhalt, sodass sich die Höhe an den Inhalt anpasst und automatisch erweitert

So übertragen Sie Dateien zwischen Docker-Container und lokalem Computer

So unterstützen Sie Webdings-Schriftarten in Firefox

Detaillierte Erläuterung der benutzerdefinierten Anweisungen für die Vue.js-Direktive

Zusammenfassung der Grundlagen der Vue-Komponenten

Verstehen Sie den Rendering-Prozess von HTML-Seiten als Vorbereitung auf das Erlernen der Front-End-Leistungsoptimierung.

Analyse des Implementierungsprozesses für die Tomcat maxPostSize-Einstellung

Grundprinzipien des skalierbaren MySQL-Designs

Detaillierte Erläuterung des vollständigen Anwendungsbeispiels zur Entwicklung von Hyperf unter Docker

Interpretation und Analyse von HTTP-Header-Informationen (detaillierte Zusammenfassung)

Probleme und Lösungen beim Verbinden des Knotens mit der MySQL-Datenbank

Artikel empfehlen

So zeigen Sie die IP-Adresse von Linux in einer virtuellen VMware-Maschine an

Beispiel für die Implementierung einer virtuellen Liste im WeChat Mini-Programm

Eine vollständige Liste der Meta-Tag-Einstellungen für Mobilgeräte

Mysql NULL verursachte die Grube

MySQL vollständig deinstallieren. Persönlicher Test!

Detaillierte Erläuterung der Idee zur Implementierung dynamischer Spalten in AngularJS-Loop-Objekteigenschaften

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

Beispiel für eine geplante MySQL-Datenbanksicherung

Verwenden Sie die vertikale Ausrichtung, um Eingabe und Bild auszurichten

Detailliertes Tutorial zur Installation von MySQL 8.0.13 (rpm) auf Centos7

Sperrt Mysql ALTER TABLE die Tabelle beim Hinzufügen von Feldern?

Detaillierte Erläuterung des Prozesses zum Verpacken der Python-Umgebung durch Docker

So verwenden Sie Elemente in React-Projekten

Verwendung des Zielattributs des HTML-Tags a

JavaScript imitiert Xiaomi-Karusselleffekt