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
Eine kurze Diskussion darüber, wie man JS Schritt für Schritt lernt
Inhaltsverzeichnis Überblick 1. Verstehen Sie die...
Vue3 + TypeScript-Entwicklungszusammenfassung
Inhaltsverzeichnis Vue3 + TypeScript lernen 1. Um...
Implementierung der CentOS8.0-Netzwerkkonfiguration
1. Unterschiede in der Netzwerkkonfiguration zwis...
Lösung für das Problem „Tabelle mysql.plugin existiert nicht“ beim Deployment von MySQL
Heute habe ich die kostenlose Version von MySQL i...
Entwicklungshandbuch für Chrome-Plugins (Erweiterungen) (vollständige Demo)
Inhaltsverzeichnis Vorne geschrieben Vorwort Was ...
Vorbereitung der Vue Element-Front-End-Anwendungsentwicklung für die Entwicklungsumgebung
Inhaltsverzeichnis Überblick 1. Entwickeln Sie di...
Detaillierte Erklärung zum Wiederherstellen von Datenbankdaten über das MySQL-Binärprotokoll
Website-Administratoren löschen Website-Daten aus...
Detaillierte Erläuterung des tatsächlichen Prozesses der Master-Slave-Synchronisierung der MySQL-Datenbank
Inhaltsverzeichnis Beschreibung der Installations...
Eine kurze Diskussion über HTML-geordnete Listen, ungeordnete Listen und Definitionslisten
Sortierte Liste XML/HTML-CodeInhalt in die Zwisch...
Detaillierte Schritte zur Installation und Konfiguration von MySQL 5.6.21
1. Übersicht MySQL-Version: 5.6.21 Download-Adres...
Beispiel für die Einstellung des HTML-Hyperlink-Stils (vier verschiedene Zustände)
Code kopieren Der Code lautet wie folgt: <styl...
Detaillierte Erläuterung der MySQL-Deadlock-Prüfung und Beispiele zur Deadlock-Entfernung
1. Abfragevorgang Prozessliste anzeigen 2. Fragen...
Detaillierte Erklärung der CSS-Float-Eigenschaft
1. Was ist Floating? Floaten bedeutet, wie der Na...
So verschieben Sie ein rotes Rechteck mit der Maus im Linux-Zeichenterminal
Alles ist eine Datei! UNIX hat es bereits gesagt....
Detaillierte Erklärung des Unterschieds zwischen Oracle10-Partitionen und MySQL-Partitionen
Die häufig verwendeten Oracle10g-Partitionen sind...