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

Tutorial zur Nginx-Standortkonfiguration von Grund auf

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

Tutorial zur Nginx-Standortkonfiguration von Grund auf

Warum wird deine Like-Aussage nicht indexiert?

Eine einfache Methode zum Implementieren einer geplanten Sicherung einer MySQL-Datenbank unter Linux

So verwenden Sie Axios-Anfragen im Vue-Projekt

Webseiten-Erlebnis: Planung und Design

Was ist SSH-Portweiterleitung? Was nützt das?

Informationen zum Vue-Komponentenwechsel, dynamischen Komponenten und Komponenten-Caching

Praxis der Verwendung von Vite2+Vue3 zum Rendern von Markdown-Dokumenten

Miniprogramme nutzen die Miniprogramm-Cloud zur Implementierung von WeChat-Zahlungsfunktionen

Lösen Sie das Problem der Kombination von AND und OR in MySQL

Artikel empfehlen

Detailliertes grafisches Tutorial zur Installation der entpackten Version von MySQL unter Windows 10

Ändern Sie das JVM-Kodierungsproblem, wenn Tomcat ausgeführt wird

CSS-Pixel und Lösungen für verschiedene Probleme bei der Anpassung mobiler Bildschirme

Eine Kurzanleitung zu Docker

So überwachen Sie den Ausführungsstatus eines Docker-Container-Shell-Skripts

So implementieren Sie Linux Deepin, um redundante Kernel zu löschen

Schritte zum Einrichten des Windows Server 2016 AD-Servers (Bild und Text)

Das native VIDEO-Tag der HTML-Seite verbirgt die Download-Button-Funktion

Praktische Funktionsweise der Verwendung beliebiger Schriftarten auf einer Webseite mit Demonstration

So fügen Sie Nginx zu den Systemdiensten in CentOS7 hinzu

Implementierungscode zur automatischen Anpassung der Breite der Webseite an die Breite des Handy-Bildschirms (Viewport)

JavaScript implementiert die Drag-Slider-Puzzle-Verifizierungsfunktion (html5, Canvas)

Verwendung des Linux-Befehls chkconfig

Detaillierte Erläuterung mehrerer Möglichkeiten zum Schreiben privater Variablen der ES6-Implementierungsklasse

Erläuterung der Faktoren, die die Datenbankleistung in MySQL beeinflussen