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

Vue importiert Echarts, um ein Linienstreudiagramm zu realisieren

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

So installieren Sie MySQL 5.7 aus dem Quellcode in einer CentOS 7-Umgebung

Dieser Artikel beschreibt, wie MySQL 5.7 aus dem ...

Eine kurze Diskussion über die maximale Anzahl geöffneter Dateien für MySQL-Systembenutzer

Was Sie aus Büchern lernen, ist immer oberflächli...

JavaScript zum Erzielen eines einfachen Drag-Effekts

In diesem Artikel wird der spezifische JavaScript...

Installieren Sie mysql5.7.10 manuell unter Ubuntu

Dieses Tutorial beschreibt den Prozess der manuel...

WeChat-Miniprogramm zur Implementierung elektronischer Signaturen

In diesem Artikel finden Sie den spezifischen Cod...

Implementierung der Vue-Nuxt-Anmeldeauthentifizierung

Inhaltsverzeichnis einführen Link Start Gehen Sie...

Eine kurze Diskussion über Schreibregeln für Docker Compose

Dieser Artikel stellt nichts im Zusammenhang mit ...

MySQL 8.0 MIT Abfragedetails

Inhaltsverzeichnis Informationen zu WITH-Abfragen...

Vue implementiert den Beispielcode zum Verknüpfen der seitlichen Navigationsleiste mit der Registerkartenseite

Inhaltsverzeichnis Technologie-Stack Wirkung anal...

Gründe und Lösungen für langsame MySQL-Abfragen, die beim Senden von Daten hängen bleiben

Weil ich ein Python-Programm geschrieben und inte...

CSS zur Implementierung von Sprites und Schriftsymbolen

Sprites: In der Vergangenheit war jede Bildressou...

MySQL 8.0.18 Installations-Tutorial unter Windows (Abbildung)

Herunterladen Download-Adresse: https://dev.mysql...

So ändern Sie das vergessene Passwort bei der Installation von MySQL auf dem Mac

1. MySQL-Datenbank auf dem Mac installieren 1. My...

Bedingte Kommentare im Internet Explorer für XHTML

<br />Bedingte Kommentare sind eine einzigar...