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

Docker-Installation und Bereitstellung einer Analyse des Net Core-Implementierungsprozesses

1. Docker-Installation und -Einstellungen #Instal...

So importieren Sie chinesische Daten in Navicat für SQLite in CSV

In diesem Artikel erfahren Sie zu Ihrer Informati...

Detaillierte Erklärung, wie MySQL bestimmt, ob eine InnoDB-Tabelle ein unabhängiger Tablespace oder ein gemeinsam genutzter Tablespace ist

Vorwort InnoDB speichert Daten in Tablespaces. In...

JS implementiert die Benutzerregistrierungsschnittstellenfunktion

In diesem Artikelbeispiel wird der spezifische JS...

Detaillierte Erklärung des Unterschieds zwischen CSS-Link und @import

Wie fügt man CSS in HTML ein? Es gibt drei Möglic...

Vue.js implementiert das Neun-Raster-Bildanzeigemodul

Ich habe Vue.js verwendet, um ein Bildanzeigemodu...

So können Sie lange Vue-Listen schnell laden

Inhaltsverzeichnis Hintergrund Hauptinhalt 1. Kom...

Detaillierte Erklärung, wie Sie die Fallstricke beim Ersetzen von logischem SQL in MySQL vermeiden können

Der Unterschied zwischen „Ersetzen durch“ und „Ei...

So verwenden Sie den Nginx-Proxy zum Surfen im Internet

Normalerweise verwende ich nginx als Reverse-Prox...

Detailliertes Tutorial zum Abrufen der Oracle 11g-Imagekonfiguration über Docker

Ohne weitere Umschweife Beginnen Sie mit der Aufz...

Centos7.3 So installieren und implementieren Sie Nginx und konfigurieren https

Installationsumgebung 1. gcc-Installation Um ngin...

Die letzten zwei Jahre mit User Experience

<br />Es ist nicht länger als zwei Jahre her...

Webdesign-Prinzipien für Hyperlinks

<br />Verwandte Artikel: 9 praktische Tipps ...

Implementierungsschritte zur Installation eines Redis-Containers in Docker

Inhaltsverzeichnis Redis auf Docker installieren ...

Detaillierte Erklärung zur Verwendung der Clip-Path-Eigenschaft in CSS

Verwendung von Clip-Pfaden Polygon Der Wert setzt...