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
MySQL Master-Slave-Synchronisationsmechanismus und Tracking-Prozess für Synchronisationsverzögerungsprobleme
Vorwort Als DBA werden Sie bei Ihrer Arbeit häufi...
Zukunftsweisendes Allround-Webdesign: Progressive Enhancement
<br />Original: Progressive Enhancement vers...
Über IE8-Kompatibilität: Erklärung des X-UA-Compatible-Attributs
Problembeschreibung: Code kopieren Der Code laute...
Analyse der Ursache des Docker-Fehlers Beendet (1) vor 4 Minuten
Docker-Fehler 1. Überprüfen Sie die Ursache Docke...
Protokollieren Sie ein langsames Abfrageereignis, das durch eine Fehleinschätzung des Online-MySQL-Optimierers verursacht wurde.
Vorwort: Ich habe Warnungen zu wahnsinnig langsam...
Docker+Gitlab+Jenkins erstellt automatisierte Bereitstellung von Grund auf
Inhaltsverzeichnis Vorwort: 1. Docker installiere...
WeChat-Applet implementiert Taschenrechnerfunktion
In diesem Artikel wird der spezifische Code für d...
Lösung für das Problem, dass das direkte Festlegen der Breite und Höhe eines Hyperlinks nicht funktioniert
Eine direkte Verwendung von Breite und Höhe ist ni...
So beheben Sie den MySQL-Fehler 10061
In diesem Artikel erfahren Sie die Lösung für das...
Zusammenfassung der allgemeinen Funktionen von regulären Ausdrücken in PostgreSQL
Zusammenfassung der allgemeinen Funktionen von re...
Verwenden von CSS3 und JavaScript zum Entwickeln von Beispielcode für die Web-Farbauswahl
Die Web-Farbauswahlfunktion in diesem Beispiel ve...
Interviewer stellen häufig Fragen zum Lebenszyklus von React
React-Lebenszyklus Zwei Bilder zum besseren Verst...
Beheben Sie das Problem, dass die Alibaba Cloud SSH-Remoteverbindung nach kurzer Zeit getrennt wird
Reproduktion des Problems Alibaba Cloud Server, b...
Beispielanalyse für MySQL-Transaktionen, Isolationsebenen und Sperrenverwendung
Dieser Artikel beschreibt anhand von Beispielen M...
Erstellen privater Mitglieder in JavaScript
Inhaltsverzeichnis 1. Verwende Closures 2. Verwen...