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

WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz

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

Vorwort

Zweispaltiges Layout

Dreispaltiges Layout

WeChat-Applet: benutzerdefinierter TabBar-Schrittdatensatz

Vue implementiert einen einfachen Lupeneffekt

Ausführliche Erklärung verschiedener binärer Objektbeziehungen in JavaScript

Tutorial zu HTML-Tabellen-Tags (8): Hintergrundbild-Attribut BACKGROUND

Detailliertes Beispiel zum Erstellen und Löschen von Tabellen in MySQL

html ein Link-Tag Titel Attribut Zeilenumbruch Mouseover Prompt Inhalt Zeilenumbruch Effekt

Nginx verwendet den Gzip-Algorithmus zum Komprimieren von Nachrichten

Zusammenfassung der drei Möglichkeiten zum Erstellen neuer Elemente

Den praktischen Wert der CSS-Eigenschaft *-gradient erkunden

Detaillierte Erklärung des TS-Objekt-Spread-Operators und des Rest-Operators

Artikel empfehlen

So verschieben Sie ein rotes Rechteck mit der Maus im Linux-Zeichenterminal

Zusammenfassung der gebräuchlichen Buchstaben in Unicode

Eine kurze Analyse der Verwendung von HTML-Float

Beispielcode zur Konvertierung von http in https mit nginx

Verwenden Sie xshell, um eine Verbindung zum Linux-Server herzustellen

Sicherheitsüberlegungen zur Windows-Serververwaltung

Eine kurze Zusammenfassung von Vue Keep-Alive

Detailliertes Tutorial zur Verwendung von stimulsoft.reports.js mit vue-cli

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.27 winx64

So implementieren Sie Funktions-Currying und -Decurrying in Javascript

Zusammenfassung der Dateninteraktion zwischen Docker-Container und Host

So setzen Sie das Zabbix-Passwort zurück (ein Schritt)

JavaScript implementiert die asynchrone Erfassung von Formulardaten

Detaillierte Erklärung der Ausführungsunterschiede zwischen count(1), count(*) und count(Spaltenname)

Liste der HTML-Tags und Hinweise zur Verwendung