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

Lösung für die nicht wirksame Änderung des El-Popover-Stils von ElementUI

Detaillierte Erklärung des Prozesses zum Erstellen eines Image-Servers mit nginx (der Unterschied zwischen Root und Alias)

Der Installationsprozess entfällt (ich habe es di...

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

Lösung für die nicht wirksame Änderung des El-Popover-Stils von ElementUI

So installieren Sie die grafische Benutzeroberfläche unter Linux

So schreiben Sie Konfigurationsdateien und verwenden MyBatis einfach

Lösen Sie das Problem, nachdem Sie --subnet zum Docker-Netzwerk hinzugefügt haben.

Vue+Swiper realisiert Timeline-Effekt

Detaillierter Installationsprozess des NodeJS-Verwaltungstools NVM

Eine Untersuchung des JS-Operators im Problem

So installieren und deinstallieren Sie open-vswitch unter Linux

So verwenden Sie Docker zum Erstellen einer Entwicklungsumgebung (Windows und Mac)

CentOS 8: Installation des benutzerdefinierten Verzeichnisses nginx (Details zum Tutorial)

Artikel empfehlen

Detaillierte Erklärung der wichtigsten Einzigartigkeit von v-for in Vue

Webseite WB.ExecWB - Beschreibung des Aufrufs der Druckmethode und Einführung in die Parameter

Detaillierte Erklärung zur Verwendung von ElementUI in Vue

Detaillierte Erklärung des Prozesses zum Erstellen eines Image-Servers mit nginx (der Unterschied zwischen Root und Alias)

Detaillierte Erläuterung der Implementierungsmethode für die Datenbank-Mehrtabellenverbindungsabfrage

Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort

Anweisung zur Ermittlung der Browserversion und Kompatibilität mit mehreren Browsern

So stellen Sie Redis in einer Linux-Umgebung bereit und installieren es in Docker

So installieren Sie Phabricator mit Docker

MySQL-Tutorial: Beispiel einer DML-Datenmanipulationssprache, ausführliche Erklärung

So verwenden Sie die Firewall-Iptables-Strategie zum Weiterleiten von Ports auf Linux-Servern

Eine kurze Analyse, ob die Verwendung von iframe zum Aufrufen einer Seite die Seite zwischenspeichert

Code zum Ausrichten von Kontrollkästchen und Radiotext im Formular

Beispiele für die Erstellung eines MySQL-Datenbankkontos, Autorisierung sowie Datenexport- und -importvorgänge

Detaillierte grafische Beschreibung des MySql8.023-Installationsprozesses (Erstinstallation)