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
Reines CSS zum Erreichen der Funktion „Klicken zum Erweitern und Lesen des Volltexts“
Notiz Beim Entwickeln einer Benutzeroberfläche fü...
Detaillierte Erläuterung der Verwendung der MySQL-Verkettungsfunktion CONCAT
In den vorherigen Artikeln wurden die Ersetzungsf...
MySQL verwendet Aggregatfunktionen zum Abfragen einer einzelnen Tabelle
Aggregatfunktionen Wirkt auf einen Datensatz ein ...
Vue realisiert die Funktion eines Bucheinkaufswagens
In diesem Artikelbeispiel wird der spezifische Co...
Tutorial zu HTML-Tabellen-Tags (31): Breiten- und Höhenattribute für Zellen WIDTH, HEIGHT
Standardmäßig werden Breite und Höhe der Zelle au...
Die Kombination und der Unterschied zwischen ENTRYPOINT und CMD im Dockerfile
Im vorherigen Artikel [Detaillierte Erläuterung v...
Mysql Master-Slave-Synchronisation Last_IO_Errno:1236 Fehlerlösung
Was ist der Grund für den Fehler Last_IO_Errno:12...
Anleitung zur Vermeidung von Docker Win Ping-Fehlern bei Containern
Über Win Docker-Desktop möchte ich mich mit der C...
So installieren Sie ElasticSearch auf Docker in einem Artikel
Inhaltsverzeichnis Vorwort 1. Docker installieren...
Detaillierte Erläuterung des Installations- und Verpackungsfalls von JavaScript Axios
1. Laden Sie das Axios-Plugin herunter cnpm insta...
So stellen Sie ein SSL-Zertifikat in einer Windows-Apache-Umgebung bereit, damit die Website https unterstützt
Ich werde nicht über die Verwendung von SSL-Zerti...
Vue SPA-Lösung zur Optimierung des ersten Bildschirms
Inhaltsverzeichnis Vorwort Optimierung SSR Import...
Eine kurze Erläuterung temporärer MySQL-Tabellen und abgeleiteter Tabellen
Abgeleitete Tabellen Wenn die Hauptabfrage eine a...
So implementieren Sie Reaktionsfähigkeit beim Lernen des Vue-Quellcodes
Inhaltsverzeichnis Vorwort 1. Schlüsselelemente e...
JavaScript, um den Effekt des Tab-Leistenwechsels zu erzielen
Registerkartenleiste: Klicken Sie auf verschieden...