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

Super detaillierte Schritte zur Installation von Zabbix3.0 auf Centos7

So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux

Nach der Eingabe von yum in Linux erscheint die E...

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

Super detaillierte Schritte zur Installation von Zabbix3.0 auf Centos7

Detaillierte Erläuterung des adaptiven Anpassungsproblems des Vue-Mobilterminals

Der Prozess des Aufbaus einer Entwicklungsumgebung basierend auf Visual Studio Code + React

Beispielcode für ungewöhnliche HTML-Tags „optgroup“, „sub“, „sup“ und „bdo“

Navicat für MySQL 11 Registrierungscode\Aktivierungscode-Zusammenfassung

HTML+CSS+JavaScript zum Erstellen eines einfachen Tic-Tac-Toe-Spiels

Zusammenfassung von sieben in JavaScript implementierten Sortieralgorithmen (empfohlen!)

Diagramm des Tutorials zur schnellen Installation und Konfiguration des Linux-Systems MySQL8.0.19

So implementieren Sie Eingabe-Checkboxen zur Erweiterung der Klickreichweite

Was tun, wenn Sie Ihr Passwort in MySQL 5.7.17 vergessen?

Artikel empfehlen

Erfahrungen bei der Neugestaltung der Homepage von TOM.COM

Vollständige Schritte zur Verwendung von Echarts und Unterverpackungen im WeChat Mini-Programm

HTML-Sonderzeichen-Konvertierungstabelle

Lösung für MySQL, das aufgrund einer übermäßigen Speicherkonfiguration nicht gestartet werden kann

Mac OS10.14 perfekt unter der virtuellen Maschine Win10 VM installieren (grafisches Tutorial)

Zusammenfassung der Verwendung von MySQL Online DDL gh-ost

So ändern Sie die Kodierung in MySQL Version 5.7 unter Windows auf UTF-8

Eine kurze Diskussion über JS-Verpackungsobjekte

Lassen Sie uns über die Merkmale und Isolationsstufen von MySQL-Transaktionen sprechen

Verwendung des Linux-Befehls „sar“ und Analyse von Codebeispielen

So aktualisieren Sie den Kernel in Deepin Linux manuell

Vue3.0 implementiert die Kapselung von Kontrollkästchenkomponenten

Lösung für das MySQL Master-Slave-Verzögerungsproblem

Win10 Docker-Toolsbox-Tutorial zum Erstellen einer PHP-Entwicklungsumgebung

So lösen Sie das Problem von -bash: /usr/bin/yum: Keine solche Datei oder kein solches Verzeichnis nach der Eingabe von yum in Linux