Mehrere Methoden zum Implementieren von zwei festen Spalten und einer adaptiven Spalte in CSS

Dieser Artikel stellt verschiedene Methoden zur Implementierung von zwei festen Spalten und einer adaptiven Spalte in CSS vor und teilt sie mit Ihnen. Die Einzelheiten sind wie folgt:

1.Flexibles Layout

Das Flexible Box Model, allgemein als Flexbox bezeichnet, ist ein eindimensionales Layoutmodell. Es bietet leistungsstarke Funktionen zur Raumverteilung und Ausrichtung zwischen untergeordneten Flexbox-Elementen. Wir bezeichnen Flexbox als ein eindimensionales Layout, da eine Flexbox das Layout von Elementen jeweils nur in einer Dimension, einer Zeile oder einer Spalte verarbeiten kann. Hier verwenden wir ein flexibles Layout, um zwei feste Spalten und eine adaptive Spalte zu erhalten.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil> 

    #hauptsächlich{
         display: flex;/*Als flexiblen Container festlegen*/
         }

    #links{ 
        width:200px;/*Feste Breite links*/
        Höhe: 400px; 
        Hintergrund: Aqua;
    }
    #Center{
         flex-grow:1; /*Den verbleibenden Platz füllen*/ 
         Höhe: 400px;  
         Hintergrund: grün;}
    #Rechts{ 
        width:200px;/*Feste rechte Breite*/
        Höhe: 400px;  
        Hintergrund: blau;
        }
    </Stil>
</Kopf>
<Text>
    <div id="Haupt">
        <div id="links"></div>
        <div id="center"></div>
        <div id="rechts"></div>
    </div>
</body>
</html>

2. Verwenden Sie die Floating-Methode

Verwenden Sie float:left und float:right für den linken bzw. rechten Teil. Float entfernt die linken und rechten Elemente aus dem Dokumentfluss, während sich das mittlere Element normalerweise im normalen Dokumentfluss befindet. Mit dem Rand können Sie den linken und rechten Rand für die Positionierung im mittleren Dokumentfluss festlegen.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil> 
    *{Rand: 0;Padding: 0;}
    #hauptsächlich{
         Breite: 100 %; Höhe: 400 Pixel;
         }
    #links{ 
        width:200px;/*Feste Breite links*/
        Höhe: 400px;
        float: left; /*Setze den Container so, dass er links schwebt*/
        Hintergrund: Aqua;
    }
    #Center{
         Breite: 100 %;
         Höhe: 400px;
         margin: 0 200px;/*Legen Sie den linken und rechten Rand des Containers fest*/ 
         Hintergrund: grün;}
    #Rechts{ 
        width:200px;/*Feste rechte Breite*/
        Höhe: 400px;  
        float: right;/*Stellt den Container so ein, dass er rechts schwebt*/
        Hintergrund: blau;
        }
    </Stil>
</Kopf>
<Text>
    <div id="Haupt">
        <div id="links"></div>
        <div id="rechts"></div>
        <div id="center"></div>
    </div>
</body>
</html>

3. Verwenden Sie die Float- und Calc-Funktion

Verwenden Sie float:left für die drei Teile, legen Sie dann die Breite auf der linken und rechten Seite fest und berechnen Sie mit der Calc-Funktion die Breite in der Mitte.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil> 
    *{Rand: 0;Padding: 0;}
    #hauptsächlich{
         Breite: 100 %; Höhe: 400 Pixel;
         }
    #links{ 
        width:200px;/*Feste Breite links*/
        Höhe: 400px;
        float: left; /*Setze den Container so, dass er links schwebt*/
        Hintergrund: Aqua;
    }
    #Center{
         width: calc(100% - 400px);/*Setze die mittlere Breite auf die Breite des übergeordneten Containers minus 400px*/
         Höhe: 400px;
         float: left;/*Stellt den Container so ein, dass er links schwebt*/ 
         Hintergrund: grün;}
    #Rechts{ 
        width:200px;/*Feste rechte Breite*/
        Höhe: 400px;  
        float:left;/*Stellt den Container so ein, dass er links schwebt*/
        Hintergrund: blau;
        }
    </Stil>
</Kopf>
<Text>
    <div id="Haupt">
        <div id="links"></div>
        <div id="center"></div>
        <div id="rechts"></div>
    </div>
</body>
</html>

4. Verwenden Sie die absolute Positionierung

Verwenden Sie die absolute Positionierung, um die linken und rechten Teile an beiden Enden zu fixieren, und verwenden Sie den Rand, um die linken und rechten Ränder für die Positionierung im mittleren Dokumentfluss anzugeben.

<!DOCTYPE html>
<html lang="de">
<Kopf>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
    <title>Dokument</title>
    <Stil> 
    *{Rand: 0;Padding: 0;}
    #hauptsächlich{
         Breite: 100 %;
         Höhe: 400px;
         position: relative;/*Übergeordneter Container verwendet relative Positionierung*/
         }
    #links{ 
        width:200px;/*Feste Breite links*/
        Höhe: 400px;
        position: absolute;/*Feste Positionierung links verwenden*/
        left: 0;/*ganz links im Container positioniert*/
        oben: 0;
        Hintergrund: Aqua;
    }
    #Center{
         Breite: 100 %;
         Höhe: 400px;
         margin: 0 200px;/*Legen Sie den linken und rechten Rand des mittleren Containers fest*/
         Hintergrund: grün;}
    #Rechts{ 
        width:200px;/*Feste rechte Breite*/
        Höhe: 400px;
        position: absolute;/*Feste Positionierung rechts*/
        right: 0;/*ganz rechts im Container positioniert*/
        oben: 0;
        Hintergrund: blau;
        }
    </Stil>
</Kopf>
<Text>
    <div id="Haupt">
        <div id="links"></div>
        <div id="center"></div>
        <div id="rechts"></div>
    </div>
</body>
</html>

Das Wirkungsdiagramm sieht wie folgt aus:

Damit ist dieser Artikel über verschiedene Methoden zur Implementierung von zwei festen Spalten und einer adaptiven Spalte mit CSS abgeschlossen. Weitere relevante Inhalte zu zwei festen Spalten und einer adaptiven Spalte mit CSS 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!

<<: Einführung in die Verwendung des Formulars „OnSubmit“ und des Eingabetyps „Bild“

>>: Detaillierte Erklärung der JavaScript-Timer

10 Dinge, die exzellente Webentwickler wissen müssen, um ihre Entwicklungsfähigkeiten zu verbessern

Mehrere Methoden zum Implementieren von zwei festen Spalten und einer adaptiven Spalte in CSS

10 Dinge, die exzellente Webentwickler wissen müssen, um ihre Entwicklungsfähigkeiten zu verbessern

Vue erzielt einen nahtlosen Karusselleffekt (Laufschrift)

9 superpraktische CSS-Tipps, die Designern und Entwicklern helfen

CSS3 benutzerdefinierter Bildlaufleistenstil::webkit-scrollbar Beispielcode, ausführliche Erklärung

So legen Sie den Standardwert für den Datums-/Uhrzeittyp in MySQL fest

Beispielcode für HTML-Layout links und rechts

Detaillierte Erklärung der MySQL-Vorkompilierungsfunktion

React-Beispiel zum Abrufen des Werts aus dem Eingabefeld

So implementieren Sie Seitensprünge in einem Vue-Projekt

So schreiben Sie ein Bild als Hintergrund und einen Link (Hintergrundbild plus Link)

Artikel empfehlen

JavaScript zum Erzielen eines Taobao-Produktbild-Umschalteffekts

Schnelle Deinstallation und Installation der Knotenumgebung eines Linux-Servers (einfacher Einstieg)

So schreiben Sie speichereffiziente Anwendungen mit Node.js

Implementierung der privaten Docker-Bibliothek

Codebeispiel für die Implementierung des Linux-Verzeichniswechsels

JavaScript implementiert das mobile Puzzlespiel mit neun Rastern

Detaillierte Schritte zur Installation von Tomcat, MySQL und Redis mit Docker

Detaillierte Erklärung zum Ändern des Stils von el-select: popper-append-to-body und popper-class

Docker-Installation von MySQL (8 und 5.7)

Idee zur Implementierung eines Popup-Maskeneffekts für Kommentarantworten, kompatibel mit IE 8/Chrome/Firefox

Probleme mit Index und FROM_UNIXTIME in MySQL

So konfigurieren Sie Nginx zur Unterstützung von IPv6 unter Linux

Beispiel für den schnellen Aufbau eines Redis-Clusters mit Docker

JavaScript ermittelt die Position der Bildlaufleiste und verschiebt die Seite zum Ankerpunkt

js um das Schlangenspiel mit Kommentaren zu implementieren