So verwenden Sie CSS, um zwei in der Mitte fixierte und adaptive Spalten zu erreichen

1. Verwenden Sie absolute Positionierung und Ränder

Das Prinzip dieser Methode besteht darin, die linke und rechte Seite so zu positionieren, dass sie außerhalb des Dokumentflusses liegen. Der mittlere Bereich fließt natürlich darunter und legt dann den Randwert für sie fest

Bei dieser Methode kann die Reihenfolge der Seitenelementstruktur beliebig geändert werden. Beachten Sie, dass der oberste Wert verarbeitet werden muss, da es sonst zu Fehlausrichtungen kommen kann.

HTML

<div id='Behälter'>
    <div class='left'>Linke Seite</div>
    <div class='center'>Mitte</div>
    <div class='right'>rechte Seite</div>
</div>

CSS

#Behälter {
    Position: relativ;
}
.links rechts{
    Position: absolut;
    oben: 0;
    Breite: 200px;
    Mindesthöhe: 500px;
    Hintergrundfarbe: rot;
}
.links {
    links: 0;
}
.Rechts {
    rechts: 0;
}
.Mitte {
    Rand: 0px 210px;
    Mindesthöhe: 500px;
    Hintergrundfarbe: gelb;
}

2. Verwenden Sie Floats und Ränder

Das Prinzip dieser Methode besteht darin, die linke und rechte Seite so zu schweben, dass sie aus dem Dokumentfluss herausragen, während sich der mittlere Teil im normalen Dokumentfluss befindet, und dann den Randwert dafür festzulegen

Bei dieser Methode muss der mittlere Teil zuletzt platziert werden. Wenn das Fenster besonders klein ist, wird die rechte Seite nach unten gedrückt.

HTML

<div id='Behälter'>
    <div class='left'>Linke Seite</div>
    <div class='right'>rechte Seite</div>
    <div class='center'>Mitte</div>
</div>

CSS

#Behälter {
    Position: relativ;
}
.links rechts {
    Breite: 200px;
    Mindesthöhe: 500px;
    Hintergrundfarbe: rot;
}
.links {
    schweben: links;
}
.Rechts {
    schweben: rechts;
}
.Mitte {
    Mindesthöhe: 500px;
    Rand: 0px 210px;
    Hintergrundfarbe: gelb;
}

3. Heiliger Gral-Layout

Dies ist die gebräuchlichste Methode, die drei sind miteinander verknüpft und die robusteste.

Zuerst müssen Sie das Mittelteil nach vorne legen und mit einer Schicht Behälter umwickeln. Der äußere Container sorgt dafür, dass es 100 % des gesamten Bildschirms einnimmt und die linke, mittlere und rechte Seite sind alle schwebend: links. Stellen Sie die mittleren linken und rechten Ränder auf die Breite der Container auf beiden Seiten plus die Ränder ein, setzen Sie den linken Rand auf -100 %, damit er ganz links angezeigt wird, und setzen Sie den rechten Rand auf -200 Pixel, damit er ganz rechts angezeigt wird.

HTML

<div id='Behälter'>
    <div Klasse='center_wrap'>
        <div class='center'>Mitte</div>
    </div>
    <div class='left'>Linke Seite</div>
    <div class='right'>rechte Seite</div>
</div>

CSS

#Behälter {
    Position: relativ;
}
.center_wrap, .links, .rechts{
    schweben: links;
    Mindesthöhe: 500px;
}
.center_wrap {
    Breite: 100 %;
}
.center_wrap .center{
    Mindesthöhe: 500px;
    Rand: 0px 210px;
    Hintergrundfarbe: gelb;
}
.links rechts {
    Breite: 200px;
    Hintergrundfarbe: rot;
}
.links {
    Rand links: -100 %;
}
.Rechts {
    Rand links: -200px;
}

4. CSS3-Flex

HTML

<div id='Behälter'>
    <div class='left'>Linke Seite</div>
    <div class='center'>Mitte</div>
    <div class='right'>rechte Seite</div>
</div>

CSS

#Behälter {
    Breite: 100 %;
    Anzeige: Flex;
}
.links rechts {
    Breite: 200px;
    Hintergrundfarbe: rot;
    Mindesthöhe: 500px;
}
.Mitte {
    biegen: 1;
    Mindesthöhe: 500px;
    Rand: 0 10px;
    Hintergrundfarbe: gelb;
}

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<: Einige Tipps zur umfassenden Optimierung, um die Zugriffsgeschwindigkeit von Websites zu verbessern

>>: JavaScript imitiert den Taobao-Lupeneffekt

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

So verwenden Sie CSS, um zwei in der Mitte fixierte und adaptive Spalten zu erreichen

So erstellen Sie mit Dockerfile ein Spiegelbild der Java-Laufzeitumgebung

Praktisches Tutorial zum Ändern des MySQL-Zeichensatzes

Implementierung der Nginx-Domänennamenweiterleitung

Lösung für Indexfehler in MySQL aufgrund unterschiedlicher Feldzeichensätze

Verwenden Sie CSS-Variablen, um coole und erstaunliche Schwebeeffekte zu erzielen

Vue implementiert Multi-Tab-Komponente

MySQL-Abfrage redundanter Indizes und ungenutzter Indexoperationen

Erläuterung des Arbeitsmechanismus von Namenode und SecondaryNameNode in Hadoop

15 wichtige Variablen, die Sie zur MySQL-Leistungsoptimierung kennen müssen (Zusammenfassung)

Verwendung und Beispiele für Linux-Befehle zur Echotextverarbeitung

Artikel empfehlen

Einführung und Tipps zur Verwendung der interaktiven Visualisierungs-JS-Bibliothek gojs

So verwenden Sie Docker zum Erstellen eines Tomcat-Clusters mit Nginx (mit Bildern und Text)

JavaScript zum Implementieren einer dynamischen Digitaluhr

Vue implementiert einen Countdown zwischen angegebenen Daten

Die große Rolle von HTML-Meta

Konfiguration virtueller Domänennamen und Testüberprüfung in einer Linux\Nginx-Umgebung

Grafisches Tutorial zur Installation und Konfiguration der Dekomprimierungsversion von MySQL 8.0.13

Detailliertes Installationstutorial für Mysql5.7.19 unter Centos7

Ein Beispiel zur Optimierung eines Projekts nach Abschluss des Vue-Projekts

WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz

Analyse des Problems der Bereitstellung eines Vue-Projekts und der Konfiguration eines Proxys in Nginx

Linux-Unlink-Funktion und wie man Dateien löscht

Detaillierte Erläuterung der Konstruktion und Verwendung von Redis5-Clustern unter Linux (Centos7)

MySQL-Limit-Leistungsanalyse und -Optimierung

Das Bildelement img hat in IE6 zusätzlichen Leerraum