N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen

N Möglichkeiten, mit CSS ein zweispaltiges Layout zu erreichen

1. Was ist ein zweispaltiges Layout?

Es gibt zwei Arten von zweispaltigen Layouts: Eines hat links eine feste Breite und rechts eine adaptive Breite, und bei dem anderen sind beide Spalten adaptiv (d. h. die Breite links wird durch die untergeordneten Elemente bestimmt und der verbleibende Platz wird rechts ausgefüllt). Dies ist eine häufig gestellte Frage in CSS-Interviews und eine Fähigkeit, die ein Front-End-Entwicklungsingenieur beherrschen muss. Die Implementierungsmethoden werden im Folgenden vorgestellt.

2. Wie erreicht man eine feste Breite links und eine adaptive Breite rechts?

1. Doppelter Inline-Block

Prinzip: Beide Elemente werden auf dislpay:inline-block gesetzt. Um den Einfluss von HTML-Leerzeichen auszuschließen, wird die Schriftgröße des übergeordneten Elements auf 0 gesetzt und die Breite des adaptiven Elements rechts mit der Funktion calc berechnet. Wenn die Höhen zweier Elemente unterschiedlich sind, können Sie sie mit „vertical-align: top“ anpassen.

Nachteil: Da die Schriftgröße des übergeordneten Elements auf 0 gesetzt ist, wird der Text im untergeordneten Element nicht angezeigt

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
		   *{
			   Polsterung: 0;
			   Rand: 0;
		   }
			.Kasten{
				Höhe: 600px;
				Breite: 100 %;
				Schriftgröße: 0;
			}
			.links{
				Anzeige: Inline-Block;
				Breite: 100px;
				Höhe: 200px;
				Hintergrundfarbe: rot;
				vertikale Ausrichtung: oben;
				
			}
			.Rechts{
				Anzeige: Inline-Block;
				Breite: berechnet (100 % – 100 Pixel);
				Höhe: 400px;
				Hintergrundfarbe: blau;
				vertikale Ausrichtung: oben;
			}
			
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div>
				<span>1234</span>
			</div>
			<div>
				<span>1234</span>
			</div>
		</div>
	</body>
</html>

2. Doppeltes Schweben

Prinzip: Zwei Elemente werden auf Float gesetzt und die Breite des adaptiven Elements rechts wird mit der Funktion calc berechnet.

Nachteil: Übergeordnetes Element muss Float löschen

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			*{
				Polsterung: 0;
				Rand: 0;
			}
			.Kasten{
				Höhe: 600px;
				Breite: 100 %;

			}
			.links{
				schweben: links;
				Breite: 100px;
				Höhe: 200px;
				Hintergrundfarbe: rot;
			}
			.Rechts{
				schweben: links;
				Breite: berechnet (100 % – 100 Pixel);
				Höhe: 400px;
				Hintergrundfarbe: blau;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div>
				<span>
					123adadadddddddddddddddddddddddddddddddddddd
				</span>
			</div>
			<div></div>
		</div>
	</body>
</html>

Prinzip: Das Element mit fester Breite auf der linken Seite schwebt, und das adaptive Element auf der rechten Seite setzt den linken Randwert größer als die Breite des Elements mit fester Breite.

Nachteil: Übergeordnetes Element muss Float löschen

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			*{
				Polsterung: 0;
				Rand: 0;
			}
			.Kasten{
				Höhe: 600px;
				Breite: 100 %;

			}
			.links{
				schweben: links;
				Breite: 100px;
				Höhe: 200px;
				Hintergrundfarbe: rot;
			}
			.Rechts{
				Rand links: 100px;
				Höhe: 400px;
				Hintergrundfarbe: blau;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div>
				<p>1234</p>
			</div>
			<div>
				<p>1234</p>
			</div>
		</div>
	</body>
</html>

4. Schwimmend + BFC

Prinzip: Legen Sie overflow:hidden für das übergeordnete Element fest, lassen Sie das Element mit fester Breite links schweben und legen Sie overflow:auto für das adaptive Element rechts fest, um einen BFC zu erstellen.

Nachteil: Wenn der Inhalt des linken Elements die eingestellte Breite überschreitet, überlappt er das rechte Element

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			*{
				Polsterung: 0;
				Rand: 0;
			}
			.Kasten{
				Höhe: 600px;
				Breite: 100 %;
				Überlauf: versteckt;
			}
			.links{
				schweben: links;
				Breite: 100px;
				Höhe: 200px;
				Hintergrundfarbe: rot;
			}
			.Rechts{
				Überlauf: automatisch;
				Höhe: 400px;
				Hintergrundfarbe: blau;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div>11111111111111111111111</div>
			<div>111111111111111111111111111111111111111111</div>
		</div>
		<div></div>
	</body>
</html>

5.absolut+Rand-links

Prinzip: Das übergeordnete Element ist relativ positioniert, das linke Element ist absolut positioniert und der linke Randwert des adaptiven Elements rechts ist größer als die Breite des Elements mit fester Breite.

Nachteil: Das übergeordnete Element ist auf relative Positionierung eingestellt

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			*{
				Polsterung: 0;
				Rand: 0;
			}
			.Kasten{
				Höhe: 600px;
				Breite: 100 %;
				Position: relativ;
			}
			.links{
				Position: absolut;
				Breite: 100px;
				Höhe: 200px;
				Hintergrundfarbe: rot;
			}
			.Rechts{
				Rand links: 100px;
				Höhe: 400px;
				Hintergrundfarbe: blau;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

6.Flexibles Layout

Prinzip: Das übergeordnete Element setzt display: flex und das adaptive Element setzt flex: 1

Nachteile: Es gibt Kompatibilitätsprobleme und IE10 und darunter unterstützen nicht

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			*{
				Polsterung: 0;
				Rand: 0;
			}
			.Kasten{
				Höhe: 600px;
				Breite: 100 %;
				Anzeige: Flex;
			}
			.links{
				Breite: 100px;
				Höhe: 200px;
				Hintergrundfarbe: rot;
			}
			.Rechts{
				biegen: 1;
				Höhe: 400px;
				Hintergrundfarbe: blau;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div></div>
			<div></div>
		</div>
	</body>
</html>

3. Elemente auf beiden Seiten sind adaptiv

Genau genommen sind die beiden Elemente nicht adaptiv, allerdings wird die oben festgelegte Breite so verändert, dass sie durch das Kindelement erweitert werden kann.

1. Schwimmend + BFC

Das Prinzip ist das gleiche wie oben, nur dass die Breite des linken Elements nicht festgelegt ist und durch die Kindelemente erweitert wird.

2. Tabellenlayout

Prinzip: Das übergeordnete Element ist display:table, und das linke Element ist mit einem div umschlossen. Das div ist auf display:table-cell und width:0.1% eingestellt (um die Mindestbreite sicherzustellen). Margin-right ist innerhalb des linken Elements eingestellt und display:table-cell ist auf dem rechten Element eingestellt.

Nachteile: IE7 und darunter unterstützen dies nicht. Bei Verwendung von display:table ist das Padding ungültig, die Eigenschaft line-height des übergeordneten Elements ist ungültig und bei Verwendung von display:table-cell ist margin ungültig.

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			.Elternteil{
				Anzeige: Tabelle;
				Breite: 100 %;
				
			}
			.Kasten{
				Anzeige: Tabellenzelle;
				Breite: 0,1 %;
			}
			.links{
				Rand rechts: 20px;
				Hintergrundfarbe: rot;
				Höhe: 200px;
			}    
			.Rechts{
				Anzeige: Tabellenzelle;
				Hintergrundfarbe: blau;
				Höhe: 300px;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div>
				<div>126545453dddddddd453453453</div>
			</div>
			<div>12121</div>
		</div>
	</body>
</html>

3.Flexibles Layout

Die Prinzipien und Mängel sind dieselben wie beim oben genannten Flex-Layout.

4. Rasterlayout

Prinzip: Das übergeordnete Element setzt display: grid, grid-template-columns: auto 1fr; (dieses Attribut definiert die Spaltenbreite, das Schlüsselwort auto bedeutet, dass der Browser die Länge selbst bestimmt. fr ist eine relative Größeneinheit, die angibt, dass der verbleibende Platz gleichmäßig aufgeteilt wird) grid-gap: 20px (Zeilenabstand)

Nachteile: schlechte Kompatibilität, IE11 unterstützt es nicht, nur Google 57 und höher können es unterstützen

<!DOCTYPE html>
<html>
	<Kopf>
		<meta charset="utf-8">
		<Titel></Titel>
		<Stil>
			.Elternteil{
				Anzeige: Raster;
				Rastervorlagenspalten: auto 1fr;
				Gitterabstand: 20px
			}  
			.links{
				Hintergrundfarbe: rot;
				Höhe: 200px;
			}
			.Rechts{
				Höhe: 300px;
				Hintergrundfarbe: blau;
			}
		</Stil>
	</Kopf>
	<Text>
		<div>
			<div>111111111111111111111111</div>
			<div></div>
		</div>
	</body>
</html>

Damit ist dieser Artikel über N Möglichkeiten zum Erstellen eines zweispaltigen Layouts mit CSS abgeschlossen. Weitere relevante Inhalte zum zweispaltigen CSS-Layout finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

<<:  HTML + CSS + JS realisiert den Scroll-Gradienteneffekt der Navigationsleiste

>>:  So spielen Sie lokale Mediendateien (Video und Audio) mit HTML und JavaScript ab

Artikel empfehlen

Docker installiert Redis und führt den visuellen Client für den Betrieb ein

1 Einleitung Redis ist eine leistungsstarke, auf ...

Anzeigen und Analysieren des MySQL-Ausführungsstatus

Wenn Sie den Eindruck haben, dass ein Problem mit...

Der Grund, warum MySQL den B+-Baum als zugrunde liegende Datenstruktur verwendet

Wir alle wissen, dass die zugrunde liegende Daten...

So ändern Sie das Root-Passwort in einem Container mit Docker

1. Verwenden Sie den folgenden Befehl, um das SSH...

JavaScript-Flusskontrolle (Schleife)

Inhaltsverzeichnis 1. for-Schleife 2. Doppelte fo...

Detaillierte Erläuterung zum Bereitstellen und Installieren der chinesischen Version von Redash in Docker

1. Installationsanweisungen Im Vergleich zur loka...

HTML-Tutorial: Sammlung häufig verwendeter HTML-Tags (6)

Verwandte Artikel: Anfänger lernen einige HTML-Ta...

So stellen Sie Ihre erste Anwendung mit Docker bereit

Im vorherigen Artikel haben Sie Docker Desktop in...

So implementieren Sie Nginx Reverse Proxy und Load Balancing (basierend auf Linux)

Probieren wir hier den Reverse-Proxy von Nginx au...

So verhindern Sie das Flashen von Vue in kleinen Projekten

Zusammenfassung HTML: Element plus V-Umhang CSS: ...

Detaillierte Analyse des virtuellen Nginx-Hosts

Inhaltsverzeichnis 1. Virtueller Host 1.1 Virtuel...

Natives JavaScript, um den Karusselleffekt zu erzielen

In diesem Artikel wird der spezifische Code für J...

Ein praktischer Bericht über die Prüfung und Bearbeitung doppelter MySQL-Datensätze vor Ort

Inhaltsverzeichnis Vorwort analysieren Daten insg...

So konfigurieren Sie Nginx zur Rückgabe von Text oder JSON

Manchmal müssen Sie beim Anfordern bestimmter Sch...

Zusammenfassung der Probleme mit der horizontalen und vertikalen Zentrierung in HTML

Ich bin in letzter Zeit auf viele Zentrierungspro...