Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen

Vorwort

Mit der Entwicklung großer Frontends tauchen immer mehr UI-Frameworks auf, was unsere Anforderungen an CSS-Funktionen bei der Frontend-Entwicklung weniger hoch oder weniger streng macht. Zumindest ist ihre Bedeutung nicht so wichtig wie die JS-Programmierung. Wir müssen jedoch immer noch die Grundlagen von CSS beherrschen. Heute fassen wir die Methoden des CSS-Layouts zusammen.

Zweispaltiges Layout

Die linke Spalte hat eine feste Breite, die rechte Spalte ist adaptiv

Float-Layout mit Rand

HTML Quelltext

<Text>
  <div id="left">Feste Breite der linken Spalte</div>
  <div id="right">Rechte Spalte adaptiv</div>
</body>

CSS Code:

#links {
  schweben: links;
  Breite: 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#Rechts {
  margin-left: 200px; /* größer oder gleich der Breite der linken Spalte*/
  Höhe: 400px;
  Hintergrundfarbe: hellgrün;
}

Float + Überlauflayout

HTML Quelltext

<Text>
  <div id="left">Feste Breite der linken Spalte</div>
  <div id="right">Rechte Spalte adaptiv</div>
</body>

CSS Code

#links {
  schweben: links;
  Breite: 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#Rechts {
  Überlauf: versteckt;
  Höhe: 400px;
  Hintergrundfarbe: hellgrün;
}

Absolutes Positionierungslayout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Position: relativ;
}
#links {
  Position: absolut;
  oben: 0;
  links: 0;
  Breite: 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#Rechts {
  Position: absolut;
  oben: 0;
  links: 200px;
  rechts: 0;
  Höhe: 400px;
  Hintergrundfarbe: hellgrün;
}

Tabellenlayout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Breite: 100 %;
  Höhe: 400px;
  Anzeige: Tabelle;
}
#links,
#Rechts {
  Anzeige: Tabellenzelle;
}
#links {
  Breite: 200px;
  Hintergrundfarbe: hellblau;
}
#Rechts {
  Hintergrundfarbe: hellgrün;
}

Flexibles Layout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Breite: 100 %;
  Höhe: 400px;
  Anzeige: Flex;
}
#links {
  Breite: 200px;
  Hintergrundfarbe: hellblau;
}
#Rechts {
  biegen: 1;
  Hintergrundfarbe: hellgrün;
}

Rasterlayout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Breite: 100 %;
  Höhe: 400px;
  Anzeige: Raster;
  Rastervorlagenspalten: 200px automatisch;
}
#links {
  Hintergrundfarbe: hellblau;
}
#Rechts {
  Hintergrundfarbe: hellgrün;
}

Die linke Spalte hat eine variable Breite und die rechte Spalte ist adaptiv

Die Breite der linken Spalte ändert sich, wenn der Inhalt zunimmt oder abnimmt, und die Breite der rechten Spalte passt sich an

Float + Überlauflayout

HTML Quelltext:

<Text>
  <div id="left">Variable Breite der linken Spalte</div>
  <div id="right">Rechte Spalte adaptiv</div>
</body>

CSS Code:

#links {
  schweben: links;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#Rechts {
  Überlauf: versteckt;
  Höhe: 400px;
  Hintergrundfarbe: hellgrün;
}

Flexibles Layout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Variable Breite der linken Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Anzeige: Flex;
  Höhe: 400px;
}
#links {
  Hintergrundfarbe: hellblau;
}
#Rechts {
  biegen: 1;
  Hintergrundfarbe: hellgrün;
}

Rasterlayout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Variable Breite der linken Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Anzeige: Raster;
  Rastervorlagenspalten: auto 1fr;
  Höhe: 400px;
}
#links {
  Hintergrundfarbe: hellblau;
}
#Rechts {
  Hintergrundfarbe: hellgrün;
}

Dreispaltiges Layout

Zwei Spalten mit fester Breite, eine Spalte mit adaptiver Breite

Float-Layout mit Rand

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="center">Feste Breite der mittleren Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Höhe: 400px;
}
#links {
  schweben: links;
  Breite: 100px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#Mitte {
  schweben: links;
  Breite: 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellgrau;
}
#Rechts {
  margin-left: 300px; /* Breite der linken Spalte + Breite der mittleren Spalte*/
  Höhe: 400px;
  Hintergrundfarbe: hellgrün;
}

Float + Überlauflayout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="center">Feste Breite der mittleren Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Höhe: 400px;
}
#links {
  schweben: links;
  Breite: 100px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#Mitte {
  schweben: links;
  Breite: 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellgrau;
}
#Rechts {
  Überlauf: versteckt;
  Höhe: 400px;
  Hintergrundfarbe: hellgrün;
}

Tabellenlayout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="center">Feste Breite der mittleren Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Anzeige: Tabelle;
  Breite: 100 %;
  Höhe: 400px;
}
#links {
  Anzeige: Tabellenzelle;
  Breite: 100px;
  Hintergrundfarbe: hellblau;
}
#Mitte {
  Anzeige: Tabellenzelle;
  Breite: 200px;
  Hintergrundfarbe: hellgrau;
}
#Rechts {
  Anzeige: Tabellenzelle;
  Hintergrundfarbe: hellgrün;
}

Flexibles Layout

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="center">Feste Breite der mittleren Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Anzeige: Flex;
  Breite: 100 %;
  Höhe: 400px;
}
#links {
  Breite: 100px;
  Hintergrundfarbe: hellblau;
}
#Mitte {
  Breite: 200px;
  Hintergrundfarbe: hellgrau;
}
#Rechts {
  biegen: 1;
  Hintergrundfarbe: hellgrün;
}

Rasterlayout

HTML Quelltext

<Text>
  <div id="übergeordnet">
    <div id="left">Feste Breite der linken Spalte</div>
    <div id="center">Feste Breite der mittleren Spalte</div>
    <div id="right">Rechte Spalte adaptiv</div>
  </div>
</body>

CSS Code

#Elternteil {
  Anzeige: Raster;
  Rastervorlagenspalten: 100px 200px automatisch;
  Breite: 100 %;
  Höhe: 400px;
}
#links {
  Hintergrundfarbe: hellblau;
}
#Mitte {
  Hintergrundfarbe: hellgrau;
}
#Rechts {
  Hintergrundfarbe: hellgrün;
}

Fixe Breite links und rechts, adaptiv in der Mitte

Der Zweck des Holy Grail-Layouts und des Double Wing-Layouts besteht darin, zuerst den mittleren Teil zu laden und dann mit dem Laden der relativ unwichtigen Dinge im linken und rechten Teil zu beginnen.

Heiliger Gral-Layout

Holy Grail-Layout: Um zu verhindern, dass der Inhalt in der Mitte blockiert wird, legen Sie für das mittlere Div (oder das äußerste übergeordnete Div) padding-left und padding-right fest (Werte, die der Breite von links und rechts entsprechen) und verwenden Sie position: relative für die linken und rechten Divs und verwenden Sie jeweils linke und rechte Attribute, sodass die Divs in der linken und rechten Spalte das mittlere Div nach dem Verschieben nicht blockieren.

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="center">Mittlere Spalte</div>
    <div id="left">Linke Spalte</div>
    <div id="right">Rechte Spalte</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Höhe: 400px;
  Polsterung: 0 200px;
  Überlauf: versteckt;
}
#links,
#Rechts {
  schweben: links;
  Breite: 200px;
  Höhe: 100%;
  Position: relativ;
  Hintergrundfarbe: hellblau;
}
#links {
  margin-left: -100%; /* #left eine Zeile nach oben verschieben*/
  links: -200px;
}
#Rechts {
  rechts: -200px;
  margin-left: -200px; /* #rechts eine Zeile nach oben verschieben*/
}
#Mitte {
  schweben: links;
  Breite: 100 %;
  Höhe: 100%;
  Hintergrundfarbe: hellgrau;
}

Doppelflügel-Layout

Doppelflügeliges Layout: Um zu verhindern, dass der Inhalt des mittleren Divs blockiert wird, erstellen Sie ein untergeordnetes Div direkt innerhalb des mittleren Divs, um den Inhalt zu platzieren, und verwenden Sie die Ränder links und rechts im untergeordneten Div, um Platz für die Divs der linken und rechten Spalte zu reservieren.

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="Mitte">
      <div id="center-inside">Mittlere Spalte</div>
    </div>
    <div id="left">Linke Spalte</div>
    <div id="right">Rechte Spalte</div>
  </div>
</body>

CSS Code:

#links,
#Rechts {
  schweben: links;
  Breite: 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#links {
  margin-left: -100%; /* #left eine Zeile nach oben verschieben*/
}
#Rechts {
  margin-left: -200px; /* #rechts eine Zeile nach oben verschieben*/
}
#Mitte {
  schweben: links;
  Breite: 100 %;
  Höhe: 400px;
  Hintergrundfarbe: hellgrau;
}
#Mitte-innen {
  Höhe: 100%;
  Rand: 0 200 px;
}

Flex-Implementierung

HTML Quelltext:

<Text>
  <div id="übergeordnet">
    <div id="center">Mittlere Spalte</div>
    <div id="left">Linke Spalte</div>
    <div id="right">Rechte Spalte</div>
  </div>
</body>

CSS Code:

#Elternteil {
  Anzeige: Flex;
}
#links,
#Rechts {
  flexibel: 0 0 200px;
  Höhe: 400px;
  Hintergrundfarbe: hellblau;
}
#links {
  Reihenfolge: -1; /* Mache #left links */
}
#Mitte {
  biegen: 1;
  Höhe: 400px;
  Hintergrundfarbe: hellgrau;
}

Damit ist dieser Artikel über die spezifischen Verwendungen des CSS-Zweispaltenlayouts und des Dreispaltenlayouts abgeschlossen. Weitere relevante CSS-Inhalte zum Zweispaltenlayout und Dreispaltenlayout finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

<<: Halbtransparente Bildverarbeitung. Ideen und Code zur Implementierung von halbtransparentem Hintergrund.

>>: Detaillierte Erklärung der Single-Choice- und Multiple-Choice-Auswahl im HTML-Select-Tag

Zusammenfassung der XHTML-Anwendung im Webdesign-Studium

Dieser Artikel fasst die spezifische Verwendung des CSS-Zweispaltenlayouts und des Dreispaltenlayouts zusammen

Vorwort

Zweispaltiges Layout

Dreispaltiges Layout

Zusammenfassung der XHTML-Anwendung im Webdesign-Studium

So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework

Schritte zum Anpassen des Symbols in Vue

Analysieren Sie die Rolle von rel="nofollow" in HTML und die Verwendung des rel-Attributs

Bedeutung und Berechnungsmethode von QPS und TPS der MySQL-Datenbank

Beispielcode für den dynamischen CSS-Ladebalkeneffekt

JavaScript zum Implementieren des Vorladens und verzögerten Ladens von Bildern

Tutorial zur HTML-Tabellenauszeichnung (16): Attribut für horizontale Titelausrichtung ALIGN

Ein Artikel zum Verständnis von MySQL Index Pushdown (ICP)

Verbessern Sie die Effizienz der Seitencodeänderung und beherrschen Sie die Kernkenntnisse der HTML-Sprache

Artikel empfehlen

Erklärung des Konzepts und der Verwendung von Like in MySQL

Docker-Bereitstellung MySQL8-Cluster (ein Master und zwei Slaves) Implementierungsschritte

So verwenden Sie SVG-Symbole in WeChat-Applets

Vue+Rem benutzerdefinierter Karusselleffekt

Super detaillierter GCC-Upgrade-Prozess unter Linux

Tomcat erhält den Clientdomänennamen des Nginx-Reverse-Proxys

Eine kurze Analyse der MySQL PHP-Syntax

Zusammenfassung der Unterschiede zwischen Vues Überwachung, Berechnung und Methoden

Analyse des Docker-Compose-Image-Release-Prozesses des Springboot-Projekts

SQL IDENTITY_INSERT-Fallstudie

So lösen Sie das Problem, dass MySQL nicht gestartet werden kann, da keine PID erstellt werden kann

MySQL Binlog-Datenwiederherstellung: Detaillierte Erklärung zum versehentlichen Löschen einer Datenbank

So leiten Sie eine URL mit Nginx Rewrite um

SQL-Übung: Produktkategorie-Datenoperation in der Online-Shopping-Datenbank

So erstellen Sie ein Apr-Modul zur Tomcat-Leistungsoptimierung