CSS ist eine unverzichtbare Sprache für unsere Front-End-Entwicklungsprogrammierer. Die gute Beherrschung von CSS kann die Front-End-Entwicklungsarbeit erheblich verbessern. In diesem Artikel wird hauptsächlich das klassische CSS-Dreispalten-Layoutschema vorgestellt und mit allen geteilt.
Dreispaltiges Layout ist, wie der Name schon sagt, auf beiden Seiten fixiert und in der Mitte adaptiv. Dreispaltiges Layout ist in der Entwicklung sehr verbreitet
1. Float-Layout
Das einfachste dreispaltige Layout ist die Verwendung von Float als Layout. Zeichnen Sie zunächst die linke und rechte Spalte:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>Zu diesem Zeitpunkt können Sie die Verteilung der linken und rechten Spalte erhalten:
Als nächstes schauen wir uns an, wie man mit der mittleren Spalte umgeht. Wir wissen, dass Float-Elemente aus dem Dokumentenfluss ausbrechen und andere Boxen dieses Element ignorieren. (Aber der Text in anderen Feldern macht immer noch Platz für dieses Element und umgibt es.) Zu diesem Zeitpunkt müssen Sie also nur ein normales p in den Container-Container einfügen, das links und rechts ignoriert und den gesamten Container ausfüllt. Darüber hinaus kann der Rand nach links und rechts verschoben werden, um den Raum auszufüllen:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>
Vorteile: Einfach
Nachteile: Der mittlere Teil wird zuletzt geladen, was sich bei vielen Inhalten auf das Erlebnis auswirkt
2 BFC-Regeln
BFC ( Die Regeln des Blockformatierungskontexts legen Folgendes fest: BFC mischt sich nicht mit Gleitkommaelementen. Elemente überlappen sich. Wenn Sie also das Hauptelement als BFC-Element festlegen:
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<p class="container">
<p class="left"></p>
<p class="right"></p>
<p class="main"></p>
</p>3 Der Kern des Holy Grail-Layouts besteht darin, dass die linken, mittleren und rechten Spalten alle durch Float schweben und dann durch einen negativen Rand angepasst werden.
Der erste Schritt besteht darin, einen Blick auf das Grundlayout zu werfen
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<p class="container">
<p class="main"></p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
Sie sehen Zu diesem Zeitpunkt Der Effekt ist: Die linke und rechte Spalte werden in die zweite Zeile gequetscht. Dies liegt daran, dass die Breite von main 100 % beträgt. Als nächstes fügen wir die linke, mittlere und rechte Spalte in einer Zeile ein, indem wir die Ränder der linken und rechten Spalte anpassen: 
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}
Allerdings ist es noch nicht fertig, wir versuchen, etwas Text zum Haupttext hinzuzufügen: 
<body>
<p class="container">
<p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>
Sie können siehe den Text Unterdrückt wird, besteht der nächste Schritt darin, das Problem zu lösen. 
.container {
padding-left: 100px;
padding-right: 100px;
}
Der vierte Schritt besteht darin, der linken und rechten Spalte ein relatives Layout hinzuzufügen und sie dann durch Festlegen der linken und rechten Werte nach außen zu verschieben: 
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}
Doppelte Nurflügler-Anordnung
Die ersten beiden Schritte des Doppelflügel-Layouts sind die gleichen wie beim Holy Grail-Layout, außer dass die Lösung für das Problem, dass der Inhalt in der mittleren Spalte blockiert wird, anders ist:
Da Der Inhalt im Hauptteil wird blockiert. Fügen Sie dann einen weiteren Inhalt im Hauptteil hinzu. Fügen Sie einen Inhalt hinzu und legen Sie seinen Rand fest, um eine Okklusion zu vermeiden. Das Problem kann gelöst werden:
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<p class="main">
<p class="content"></p>
</p>
<p class="left"></p>
<p class="right"></p>
</body>
</html>5. Flex-Layout
Flex-Layout ist auch sehr einfach, um ein dreispaltiges Layout zu implementieren, aber Sie müssen darauf achten Browserkompatibilität:
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<p class="container">
<p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
<p class="left"></p>
<p class="right"></p>
</p>
</body>Die absolute Positionierung ist ebenfalls relativ einfach und kann zuerst geladen werden. Betreff:
Der obige Inhalt handelt von sechs klassischen dreispaltigen CSS-Layoutplänen. Ich hoffe, er kann allen helfen.
Verwandte Empfehlungen:
Beim Layout der Webseite zuerst HTML oder zuerst CSS schreiben?
Auf der Webseite Layout von HTML Was ist der Unterschied zwischen div und span
Welche Techniken gibt es für das CSS-Layout
Das obige ist der detaillierte Inhalt vonSechs klassische CSS-Lösungen für das dreispaltige Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
