CSS3 Flexible Box Flex, um ein dreispaltiges Layout zu erreichen
|
Wie der Titel schon sagt: Die Höhe ist bekannt, die Breite der linken und rechten Spalte beträgt 300px und die Mitte ist adaptiv: Die elastische Box selbst liegt nebeneinander, wir müssen nur die Breite einstellen. Verwenden Sie einen Container, um die drei Spalten zu umschließen, setzen Sie die Anzeigeeigenschaft des Containers auf „Flex“, setzen Sie die Breite der linken und rechten Spalten auf 300 Pixel und setzen Sie „Flex:1“ für die mittlere Spalte. Dabei stellt 1 das Breitenverhältnis dar. Der spezifische Wert hängt vom Flexwert anderer Felder ab. Da die Breite anderer Felder hier festgelegt ist, wird die mittlere Spalte automatisch ausgefüllt:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>Dreispaltiges Layout</title>
</Kopf>
<style type="text/css">
html*{
Rand: 0;
Polsterung: 0;
}
.Container{
Anzeige: Flex;
}
.links{
Hintergrundfarbe: Aqua;
Breite: 300px;
Höhe: 100px;
}
.Center{
Höhe: 100px;
biegen: 1;
Hintergrund: #f296ff;
}
.Rechts{
Höhe: 100px;
Hintergrundfarbe: #6ee28d;
Breite: 300px;
}
</Stil>
<Text>
<!-- Schreiben Sie bei vorgegebener Höhe ein dreispaltiges Layout mit 300 Pixeln Breite links und rechts und adaptiver Breite in der Mitte -->
<div Klasse="Container">
<div Klasse="links"></div>
<div Klasse="Mitte"></div>
<div Klasse="rechts"></div>
</div>
</body>
</html>Der Effekt ist wie unten dargestellt:
Damit ist dieser Artikel über die Verwendung von CSS3 Flexible Box Flex zur Implementierung eines dreispaltigen Layouts abgeschlossen. Weitere Informationen zum dreispaltigen CSS3 Flex-Layout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
>>: Tiefgreifendes Verständnis von Javascript-Prototypen und Prototypenketten
Artikel empfehlen
Teilen Sie 101 MySQL-Debugging- und Optimierungstipps
MySQL ist eine leistungsstarke Open-Source-Datenb...
Detaillierte Erklärung der JavaScript-Timer- und Button-Effekt-Einstellungen
Timer-Effekte: <div> <font id='timeC...
JavaScript realisiert den Effekt der mobilen Modalbox
In diesem Artikelbeispiel wird der spezifische Ja...
MySQL 8.0.16 Installations- und Konfigurations-Tutorial unter CentOS7
Deinstallieren Sie die alte MySQL-Version (übersp...
Erfahren Sie, wie Sie den Zabbix-Dienst auf Saltstack bereitstellen
Inhaltsverzeichnis Saltstack stellt Zabbix-Dienst...
Detaillierte Erläuterung des CocosCreator-Projektstrukturmechanismus
Inhaltsverzeichnis 1. Projektordnerstruktur 1. As...
Detaillierte Erläuterung des Aufbaus und der Verwendung des Docker Private Warehouse
Das Image kann auf hub.docker.com gespeichert wer...
Lösen Sie das Problem der Selbstinkrementierung des int-Primärschlüssels von MySQL
Einführung Wenn wir die MySQL-Datenbank verwenden...
Das MySQL-Passwort enthält Sonderzeichen und den Anmeldevorgang über die Befehlszeile
Um uns auf dem Server schnell bei der Datenbank a...
js-Code, der den Button mit der Eingabetaste verknüpft
Code kopieren Der Code lautet wie folgt: <html...
Eine kurze Diskussion über den Werttransfer zwischen Vue-Komponenten (einschließlich Vuex)
Inhaltsverzeichnis Vom Vater zum Sohn: Sohn zum V...
Gegenseitiger Wertetransfer und Aufruf von Vue-Eltern-Kind-Komponenten
Inhaltsverzeichnis 1. Übergeordnetes Element über...
Schritte zum Ändern des MySQL-Datenbankdatendateipfads unter Linux
Nach der Installation der MySQL-Datenbank mit der...
Die Lösung für die Seite, die nach Routenänderungen nach Reaktionssprüngen nicht aktualisiert wird
Inhaltsverzeichnis Frage Lösung Frage Es scheint ...
So zeigen Sie die Ausführungszeit von MySQL-Anweisungen über Query Profiler an
Im vorherigen Artikel wurden zwei Methoden zum Üb...