Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)

Das sogenannte dreispaltige adaptive Layout bedeutet, dass die Breite der beiden Seiten fest und die Breite des mittleren Blocks adaptiv ist. Diese Frage wurde auch im Vorstellungsgespräch für Frontend-Ingenieure bei NetEase in diesem Jahr gestellt. Ich teile es hier hauptsächlich in zwei Kategorien ein, eine basiert auf der traditionellen Implementierung der Position und die andere basiert auf der neuen Funktion von CSS3, der Implementierung des elastischen Boxmodell-Layouts.

1. Layout basierend auf traditionellen Attributen wie Position und Rand

Auch hier gibt es drei Methoden, nämlich absolute Positionierung, Holy Grail Layout und Self-Floating.

1). Absolute Positionierungsmethode

Das Prinzip der absoluten Positionierung besteht darin, die absolute Positionierung auf der linken und rechten Seite zu verwenden. Da die absolute Positionierung den Dokumentfluss verlässt, fließt die Mitte dahinter natürlich auf sie zu. Verwenden Sie dann das Randattribut, um die Breite der linken und rechten Elemente freizugeben, damit sich das mittlere Element an die Bildschirmbreite anpassen kann.

Der Code lautet wie folgt:

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="UTF-8">
  <Titel>Layoutbox</Titel>
  <link rel="stylesheet" type="text/css" href="../css/layout_box.css">
 </Kopf>
 <Text>
  <h3>Erreichen Sie ein adaptives Layout mit drei Spaltenbreite</h3>
  <div id = "left">Ich bin links</div>
  <div id = "right">Ich bin rechts</div>
  <div id = "center">Ich bin in der Mitte</div>
 </body>
</html>

CSS Code:

html,body{ Rand: 0px;Breite: 100%; }
h3{Höhe: 100px;Rand:20px 0 0;}
#links,#rechts{Breite: 200px;Höhe: 200px; Hintergrundfarbe: #ffe6b8;Position: absolut;oben:120px;}
#links{links:0px;}
#rechts{rechts: 0px;}
#center{margin:2px 210px ;Hintergrundfarbe: #eee;Höhe: 200px; }

Der Vorteil dieser Layoutmethode besteht darin, dass die Reihenfolge der drei Divs beliebig geändert werden kann. Der Nachteil besteht darin, dass aufgrund der absoluten Positionierung der oberste Wert mit Vorsicht behandelt werden muss, wenn sich auf der Seite anderer Inhalt befindet. Am besten initialisieren Sie den CSS-Stil, genau wie beim Hinzufügen eines Titels im obigen Beispiel. Wenn der Stil nicht initialisiert wird, werden die Werte auf beiden Seiten und in der Mitte nicht ausgerichtet. Darüber hinaus erfolgt beim Verkleinern des Browserfensters eine Komprimierung, wenn die Größe unter 200 Pixel liegt.
Das Ergebnis ist wie in der Abbildung dargestellt. Sie können sehen, dass sich die Breite der mittleren Spalte mit der Bildschirmgröße vergrößert oder verkleinert.

2). Verwenden Sie die selbstschwebende Methode

Das Prinzip der selbstschwebenden Methode besteht darin, float:left und float:right für die linken bzw. rechten Elemente zu verwenden. Float lässt die linken und rechten Elemente aus dem Dokumentfluss heraus, und das mittlere Element befindet sich normalerweise im normalen Dokumentfluss. Margin wird verwendet, um die linken und rechten Ränder für die Positionierung anzugeben.

HTML Quelltext:

<h3>Selbstschwebende Methode zur Positionierung verwenden</h3>
<div id = "left_self">Ich bin links</div>
<div id = "right_self">Ich bin rechts</div>
<div id = "center_self">Ich bin in der Mitte</div>

CSS Code:

#left_self,#right_self{ Breite: 200px;Höhe: 200px; Hintergrundfarbe: #ffe6b8 }
#links_selbst {float: links;}
#rechts_selbst{float: rechts;}
#center_self{Rand: 0 210px;Höhe: 200px; Hintergrundfarbe: #a0b3d6}

Der Vorteil dieser Layoutmethode besteht darin, dass sie weniger von externen Faktoren beeinflusst wird. Ihr Nachteil ist jedoch die Reihenfolge der drei Elemente. Das Center muss zuletzt platziert werden. Dies unterscheidet sich von der absoluten Positionierung. Das Center nimmt die Dokumentflussposition ein und muss daher zuletzt platziert werden. Die Positionen der linken und rechten Elemente haben nichts miteinander zu tun. Wenn das Browserfenster klein ist, wird das rechte Element in die nächste Zeile verschoben.

3). Heiliger Gral-Layout

Das Prinzip des Holy Grail-Layouts ist die Methode der negativen Marge. Um das Holy Grail-Layout zu verwenden, müssen Sie zuerst ein Div außerhalb des mittleren Elements einfügen. Das eingefügte Div muss das Float-Attribut festlegen, um einen BFC zu bilden, und die Breite festlegen. Diese Breite muss mit dem negativen Randwert des linken Blocks abgestimmt sein. Das spezifische Prinzip finden Sie hier. Das Holy Grail-Layout wird hier ausführlich erklärt.

Implementierungscode:

<h3>Negative Ränder für das Layout verwenden</h3>
  <div id = "umbrechen">
   <div id = "Mitte"></div>
  </div>
  <div id = "linker_Rand"></div>
  <div id = "rechter_Rand"></div>

CSS Code:

#wrap{ Breite: 100 %; Höhe: 100px; Hintergrundfarbe: #fff; Float: links;}
#wrap #center{ Rand:0 210px; Höhe: 100px; Hintergrundfarbe: #ffe6b8; }
#linker_Rand,#rechter_Rand{ float: left;Breite: 200px;Höhe: 100px;Hintergrundfarbe: dunkelorange }
#left_margin {margin-left: -100%; Hintergrundfarbe: hellrosa}
#right_margin{margin-left: -200px;}

Diese Methode ist im Website-Layout sehr verbreitet und wird oft in Interviews getestet. Der Vorteil liegt darin, dass die drei Spalten miteinander in Beziehung stehen und einen gewissen Widerstand aufweisen. Dabei ist zu beachten, dass der Mittelteil des Layouts immer vorne platziert werden muss und die Reihenfolge von links und rechts nicht eingeschränkt ist. Für den linken Rand muss der negative Wert der Umbruchbreite entsprechen.
Die drei Methoden zum Erreichen eines dreispaltigen, adaptiven Layouts für Webseitenbreiten werden in der folgenden Abbildung dargestellt.

2. Neue Funktionen von CSS3

Wickeln Sie ein Div um die Außenseite und stellen Sie es auf display:flex ein; stellen Sie flex:1 in der Mitte ein; das Boxmodell ist jedoch standardmäßig fest verbunden und Sie können margin verwenden, um den äußeren Rand zu steuern.

Code:

<div id = "Box">
		 <div id = "linke_box"></div>
		 <div id = "center_box"></div>
		 <div id = "rechte_Box"></div>
		</div>

CSS-Stil:

#box{Breite:100%;Anzeige:flex;Höhe:100px;Rand:10px;}
#linke_Box,#rechte_Box{Breite: 200px;Höhe: 100px; Rand: 10px; Hintergrundfarbe: hellrosa}
#center_box{ flex:1; Höhe: 100px;Rand: 10px; Hintergrundfarbe: hellgrün}

Hinweis: Das Center muss in der Mitte platziert werden.

Das Wirkungsdiagramm sieht wie folgt aus:

Es gibt viele weitere Funktionen des CSS-Layouts. Der nächste Schritt besteht darin, das Schweben zu untersuchen und dann Positions- und Anzeigeattribute zu untersuchen.

Damit ist dieser Artikel über die Verwendung von CSS zum Erstellen eines dreispaltigen adaptiven Layouts (feste Breite auf beiden Seiten, adaptiv in der Mitte) abgeschlossen. Weitere relevante Inhalte zum dreispaltigen adaptiven CSS-Layout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<: Der Aufruf der Suchmaschine auf der Seite erfolgt am Beispiel von Baidu

>>: Tipps zur Verwendung von DIV-Containern mit fester Höhe in IE6 und IE7

JS realisiert den Scroll-Effekt von Online-Ankündigungen

Verwenden Sie CSS, um ein dreispaltiges adaptives Layout zu erreichen (feste Breite auf beiden Seiten, adaptiv in der Mitte)

JS realisiert den Scroll-Effekt von Online-Ankündigungen

So lösen Sie das Problem, dass der Docker-Container keinen Vim-Befehl hat

Diskussion über Stilanpassung und Browserkompatibilitätsprobleme bei der Verwendung des Eingabeelements [type="file"]

Ein ausführliches Tutorial zur Installation von Jenkins auf Docker für Anfänger

So umgehen Sie unbekannte Feldnamen in MySQL

Tutorial zu HTML-Formular-Tags (2):

Wird der Index in der MySQL-Abfragebedingung verwendet?

MySQL-Abfragedaten aus einer Tabelle und Einfügen in eine andere Tabellenimplementierungsmethode

Diagramm zur Installation von VMware 14 unter Windows 10

Analyse des Implementierungsprinzips von Vue-Anweisungen

Artikel empfehlen

Vue implementiert die Countdown-Komponente für zweite Kills

Beispiele für Vorschaufunktionen für verschiedene Dateitypen in vue3

Häufige JavaScript-Speicherfehler und Lösungen

So erlauben Sie den Remotezugriff auf offene Ports in Linux

Tutorial zur HTML-Tabellenauszeichnung (29): Farbattribut für helle Zellenränder BORDERCOLORLIGHT

docker-maven-plugin verpackt das Image und lädt es in ein privates Warehouse hoch

Analyse der Methode zum Einrichten geplanter Aufgaben in MySQL

Beispiel für eine HTTPS-Konfigurationsmethode für den Nginx-Server

Detaillierte Erklärung des Unterschieds zwischen WeChat-Applet Bindtap und Catchtap

Eine kurze Erläuterung der Unterschiede zwischen FTP, FTPS und SFTP

Implementierung des Durchklickens des transparenten Bereichs unregelmäßiger Formen in Electron

Diskussion über Web-Nachahmung und Plagiat

CSS setzt Overflow, um die Bildlaufleiste auszublenden und gleichzeitig das Scrollen zu ermöglichen

Beispiel für die Verwendung des Nginx-Reverse-Proxys für Go-FastDFS

Zusammenfassung der Methoden zur Verbesserung der MySQL-Anzahl