Detaillierte Erläuterung der Implementierung mehrerer dreispaltiger adaptiver CSS-Layouts

Detaillierte Erläuterung der Implementierung mehrerer dreispaltiger adaptiver CSS-Layouts

Vorwort

Um dem herkömmlichen WEB-Layout zu folgen, sind sie alle im Links-Mitte-Rechts-Layout mit Kopf- und Fußzeilenmodus geschrieben.

Der erste: basierend auf Float-Implementierung

Umsetzungsideen

Konventionell wird gedacht, dass die linke und rechte Seite jeweils zur linken und rechten Seite schweben.

Code-Implementierung

<!-- HTML-Abschnitt -->
<div Klasse="Container">
  <!-- Obere Kopfzeile -->
  <header>Hier ist die Kopfzeile</header>
  <!-- Abseits und Inhalt in der Mitte -->
  <div Klasse="Mittleres Clearfix">
    <beiseite Klasse="links"></beiseite>
    <aside class="rechts"></aside>
    <!-- Der mittlere Inhalt wird unterhalb der rechten Spalte platziert, um ein Herunterdrücken der rechten Seite zu verhindern. -->
    <div class="content">Hier ist der Inhalt</div>
  </div>
  <!-- Fußzeile -->
  <Fußzeile></Fußzeile>
</div>
<!-- CSS-Abschnitt -->
<style lang="scss">
  * {
    Rand: 0;
    Polsterung: 0;
  }
  
  .klarfix {
    Zoom: 1;
    &::nach {
      Anzeige: Block;
      Inhalt: ' ';
      klar: beide
    }
  }
  
  html, Text {
    Breite: 100 %;
    Höhe: 100%
    }
    .container {
      Breite: 100%
      Höhe: 100%
      Kopfzeile {
        Höhe: 80px;
        Hintergrund: rgba(0, 0, 0, 0,5)
      }
      Fußzeile {
        Höhe: 80px;
        Hintergrund: rgba(0, 0, 0, 0,5)
      }
      .Mitte {
        Höhe: berechnet (100 % – 80 Pixel – 80 Pixel)
        beiseite
          Höhe: 100%;
          Breite: 300px;
          Hintergrund: rgba(156, 154, 249, 1)
        }
        .links {
          Schwimmer: links
        }
        .Rechts: {
          schweben: rechts
        }
      }
    }
  }
</Stil>

Ergebnisse erzielen

Die zweite Methode: basierend auf Position: absolute Implementierung

Umsetzungsideen

Weisen Sie „position: relativ“ zum übergeordneten Element der drei mittleren Spalten zu, und weisen Sie „position: absolut“ den linken und rechten seitlichen Spalten zu, und weisen Sie „left: 0“ bzw. „right: 0“ die Breite „width: custom“ zu. Weisen Sie dem mittleren Inhalt links und rechts jeweils dieselbe Breite wie der linken und rechten Breite zu.

Code-Implementierung

<!-- HTML-bezogener Code-->
<div Klasse="Container">
  <!-- Obere Kopfzeile -->
  <Kopfzeile></Kopfzeile>
  <div Klasse="Mitte">
    <!-- Beiseite gelassen -->
    <beiseite Klasse="links"></beiseite>
    <!-- Mittlerer Inhalt -->
    <div class="content">Hier ist der Inhalt</div>
    <!-- Rechts beiseite -->
    <aside class="rechts"></aside>
  </div>
  <!-- Fußzeile -->
  <Fußzeile></Fußzeile>
</div>
<!-- CSS-bezogener Code-->
<style lang="scss">
  * {
    Rand: 0;
    Polsterung: 0
  }
  
  html, Text {
    Breite: 100 %;
    Höhe: 100%
  }
  
  .container {
    Breite: 100 %;
    Höhe: 100%;
    Kopfzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    Fußzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    .Mitte {
      Höhe: berechnet (100 % – 80 Pixel – 80 Pixel);
      Position: relativ;
      beiseite,
      .Inhalt {
        Position: absolut;
      }
      .links {
        Breite: 300px;
        Hintergrund: rgba(156, 154, 249, 1);
        links: 0;
        Höhe: 100%;
      }
      .Rechts {
        Breite: 300px;
        Hintergrund: rgba(156, 154, 249, 1);
        rechts: 0;
        Höhe: 100%;
      }
      .Inhalt {
        links: 300px;
        rechts: 300px;
      }
    }
  }
</Stil>

Ergebnisse erzielen

Die dritte Methode: basierend auf der Anzeige: Flex

Umsetzungsideen

Geben Sie den linken, mittleren und rechten Spalten den übergeordneten Wert display: flex, geben Sie den linken und rechten Seitenbreiten benutzerdefinierte Werte und geben Sie dem mittleren Inhalt flex:1

Code-Implementierung

<!-- HTML-bezogener Code-->
<div Klasse="Container">
  <!-- Obere Kopfzeile -->
  <Kopfzeile></Kopfzeile>
  <div Klasse="Mitte">
    <!-- Beiseite gelassen -->
    <beiseite Klasse="links"></beiseite>
    <!-- Mittlerer Inhalt -->
    <div class="content">Hier ist der Inhalt</div>
    <!-- Rechts beiseite -->
    <aside class="rechts"></aside>
  </div>
  <!-- Fußzeile -->
  <Fußzeile></Fußzeile>
</div>
<!-- CSS-Abschnitt -->
<style lang="scss">
  * {
    Rand: 0;
    Polsterung: 0;
  }
  
  html, Text {
    Breite: 100 %;
    Höhe: 100%;
  }
  
  .container {
    Kopfzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    Fußzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    .Mitte {
      Anzeige: Flex;
      Höhe: berechnet (100 % – 80 Pixel – 80 Pixel);
      beiseite
        Breite: 300px;
        Hintergrund: rgba(156, 154, 249, 1);
      }
      .Inhalt: {
        biegen: 1;
      }
    }
  }
</Stil>

Ergebnisse erzielen

Die vierte Methode: basierend auf der Anzeige: Tabellenimplementierung

Umsetzungsideen

Geben Sie dem übergeordneten Element der linken, mittleren und rechten Spalte jeweils die Anzeige „Tabelle“ und die Breite „100 %“ an, geben Sie der linken, mittleren und rechten Spalte jeweils die Anzeige „Tabellenzelle“ an und geben Sie die Breite der linken und rechten Seite an.

Code-Implementierung

<!-- HTML-bezogener Code-->
<div Klasse="Container">
  <!-- Obere Kopfzeile -->
  <Kopfzeile></Kopfzeile>
  <div Klasse="Mitte">
    <!-- Beiseite gelassen -->
    <beiseite Klasse="links"></beiseite>
    <!-- Mittlerer Inhalt -->
    <div class="content">Hier ist der Inhalt</div>
    <!-- Rechts beiseite -->
    <aside class="rechts"></aside>
  </div>
  <!-- Fußzeile -->
  <Fußzeile></Fußzeile>
</div>
<!-- CSS-Abschnitt -->
<style lang="scss">
  * {
    Rand: 0;
    Polsterung: 0;
  }
  
  html, Text {
    Breite: 100 %;
    Höhe: 100%;
  }
  
  .container {
    Kopfzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    Fußzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    .Mitte {
      Anzeige: Tabelle;
      Breite: 100%
      Höhe: berechnet (100 % – 80 Pixel – 80 Pixel);
      beiseite
        Breite: 300px;
        Anzeige: Tabellenzelle;
        Hintergrund: rgba(156, 154, 249, 1);
      }
      .Inhalt: {
        Anzeige: Tabellenzelle;
      }
    }
  }
</Stil>

Ergebnisse erzielen

Fünftens: basierend auf der Anzeige: Rasterimplementierung

Umsetzungsideen

Geben Sie den linken, mittleren und rechten Spalten das übergeordnete Element „display: grid“ und verwenden Sie „grid-template-columns: 300px auto 300px“, um sie in drei Spalten mit den Breiten 300px, auto und 300px aufzuteilen.

Code-Implementierung

<!-- HTML-bezogener Code-->
<div Klasse="Container">
  <!-- Obere Kopfzeile -->
  <Kopfzeile></Kopfzeile>
  <div Klasse="Mitte">
    <!-- Beiseite gelassen -->
    <beiseite Klasse="links"></beiseite>
    <!-- Mittlerer Inhalt -->
    <div class="content">Hier ist der Inhalt</div>
    <!-- Rechts beiseite -->
    <aside class="rechts"></aside>
  </div>
  <!-- Fußzeile -->
  <Fußzeile></Fußzeile>
</div>
<!-- CSS-Abschnitt -->
<style lang="scss">
  * {
    Rand: 0;
    Polsterung: 0;
  }
  
  html, Text {
    Breite: 100 %;
    Höhe: 100%;
  }
  
  .container {
    Kopfzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    Fußzeile {
      Höhe: 80px;
      Hintergrund: rgba(0, 0, 0, 0,5);
    }
    .Mitte {
      Anzeige: Raster;
      Rastervorlagenspalten: 300px, automatisch 300px;
      Höhe: berechnet (100 % – 80 Pixel – 80 Pixel);
      beiseite
        Hintergrund: rgba(156, 154, 249, 1);
      }
    }
  }
</Stil>

Ergebnisse erzielen

Damit ist dieser Artikel mit der detaillierten Erklärung der Implementierung verschiedener dreispaltiger adaptiver Layouts in CSS abgeschlossen. Weitere relevante Inhalte zu dreispaltigen adaptiven CSS-Layouts 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!

<<:  Verwendung von „Select“, „Distinct“ und „Limit“ in MySQL

>>:  Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)

Artikel empfehlen

Allgemeine Shell-Skriptbefehle und zugehöriges Wissen unter Linux

Inhaltsverzeichnis 1. Einige Punkte, die Sie beac...

So richten Sie eine automatische tägliche Datenbanksicherung in Linux ein

Dieser Artikel verwendet das Centos7.6-System und...

Fallstudie zu den SQL ROW_NUMBER()- und OVER()-Methoden

Syntaxformat: row_number() über (Partition durch ...

Detaillierte Erläuterung des Vue-Identitätsauthentifizierungsmanagements und der Mandantenverwaltung

Inhaltsverzeichnis Überblick Berechtigungen auf S...

JavaScript zur Implementierung der Funktion zum Ändern des Avatars

In diesem Artikel wird der spezifische JavaScript...

Details zur Datenanzeige der Vue3-Listenschnittstelle

Inhaltsverzeichnis 1. Beispiel für die Anzeige de...

Lösen Sie das Sprungproblem des mobilen Endgeräts (CSS-Übergang, Ziel-Pseudoklasse).

Vorwort Viele Freunde, die gerade mit mobilen End...

So legen Sie in Linux eine feste IP fest (getestet und effektiv)

Öffnen Sie zunächst die virtuelle Maschine Öffnen...

Mehrere Möglichkeiten zum Verbinden von Tabellen in MySQL

Die Verbindungsmethode in der MySQL-Tabelle ist e...

Sprungcode für HTML-Seite

Speichern Sie den folgenden Code als Standard-Home...

Probleme und Lösungen bei der Installation und Verwendung von VMware

Die virtuelle Maschine wird verwendet oder es kan...

el-table in vue realisiert automatischen Deckeneffekt (unterstützt feste)

Inhaltsverzeichnis Vorwort Umsetzungsideen Wirkun...

Detailliertes Beispiel des Kettenprogrammierstils von jQuery

Das Implementierungsprinzip der Kettenprogrammier...

Grafische Analyse des Speicherorts der MySQL5.7-Konfigurationsdatei in der Windows-Umgebung

1. MySQL-Installationsverzeichnis Kopieren Sie de...

Drei Beispiele für Unschärfe-Hintergrundeffekte mit CSS3

Beginnen wir nicht mit der Einleitung, sondern ko...