Heim > Artikel > Web-Frontend > Sechs klassische CSS-Lösungen für das dreispaltige Layout

Sechs klassische CSS-Lösungen für das dreispaltige Layout

小云云Original: 2017-12-04 13:32:5810339Durchsuche

CSS ist eine unverzichtbare Sprache für unsere Front-End-Entwicklungsprogrammierer. Die gute Beherrschung von CSS kann die Front-End-Entwicklungsarbeit erheblich verbessern. In diesem Artikel wird hauptsächlich das klassische CSS-Dreispalten-Layoutschema vorgestellt und mit allen geteilt.

Dreispaltiges Layout ist, wie der Name schon sagt, auf beiden Seiten fixiert und in der Mitte adaptiv. Dreispaltiges Layout ist in der Entwicklung sehr verbreitet

1. Float-Layout

Das einfachste dreispaltige Layout ist die Verwendung von Float als Layout. Zeichnen Sie zunächst die linke und rechte Spalte:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    </style>
      
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

Zu diesem Zeitpunkt können Sie die Verteilung der linken und rechten Spalte erhalten:

Als nächstes schauen wir uns an, wie man mit der mittleren Spalte umgeht. Wir wissen, dass Float-Elemente aus dem Dokumentenfluss ausbrechen und andere Boxen dieses Element ignorieren. (Aber der Text in anderen Feldern macht immer noch Platz für dieses Element und umgibt es.) Zu diesem Zeitpunkt müssen Sie also nur ein normales p in den Container-Container einfügen, das links und rechts ignoriert und den gesamten Container ausfüllt. Darüber hinaus kann der Rand nach links und rechts verschoben werden, um den Raum auszufüllen:

   <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        margin-left: 120px;
        margin-right: 120px;
      }
    
      .container {
        border: 1px solid black;
      }
    
      <p class="container">
      <p class="left"></p>
      <p class="right"></p>
      <p class="main"></p>
      </p>

Vorteile: Einfach

Nachteile: Der mittlere Teil wird zuletzt geladen, was sich bei vielen Inhalten auf das Erlebnis auswirkt

2 BFC-Regeln

BFC ( Die Regeln des Blockformatierungskontexts legen Folgendes fest: BFC mischt sich nicht mit Gleitkommaelementen. Elemente überlappen sich. Wenn Sie also das Hauptelement als BFC-Element festlegen:

    <style>
      .left {
        float: left;
        width: 100px;
        height: 200px;
        background-color: red;
      }
    
      .right {
        float: right;
        width: 100px;
        height: 200px;
        background-color: yellow;
      }
    
      .main {
        background-color: green;
        height: 200px;
        overflow: hidden;
      }
    
      <p class="container">
        <p class="left"></p>
        <p class="right"></p>
        <p class="main"></p>
      </p>

3 Der Kern des Holy Grail-Layouts besteht darin, dass die linken, mittleren und rechten Spalten alle durch Float schweben und dann durch einen negativen Rand angepasst werden.

Der erste Schritt besteht darin, einen Blick auf das Grundlayout zu werfen

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            background-color: yellow;
        }

        .main {
            float: left;
            width: 100%;
            height: 200px;
            background-color: blue;
        }
    </style>
    <body>
        <p class="container">
            <p class="main"></p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

Sie sehen Zu diesem Zeitpunkt Der Effekt ist: Die linke und rechte Spalte werden in die zweite Zeile gequetscht. Dies liegt daran, dass die Breite von main 100 % beträgt. Als nächstes fügen wir die linke, mittlere und rechte Spalte in einer Zeile ein, indem wir die Ränder der linken und rechten Spalte anpassen:

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            background-color: yellow;
        }

Der zweite Schritt ist bis Der linke Rand von links ist auf -100 % eingestellt. Zu diesem Zeitpunkt wird die linke Spalte an den Anfang der ersten Zeile verschoben. Setzen Sie dann den linken Rand von rechts auf den negativen Wert seiner Breite: -100px, und die rechte Spalte wird ebenfalls in die gleiche Zeile wie die linke und mittlere Spalte verschoben:

Allerdings ist es noch nicht fertig, wir versuchen, etwas Text zum Haupttext hinzuzufügen:

    <body>
        <p class="container">
            <p class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

Sie können siehe den Text Unterdrückt wird, besteht der nächste Schritt darin, das Problem zu lösen.

Der dritte Schritt besteht darin, dem Container eine Polsterung zu geben, die genau der Breite der linken und rechten Spalte entsprechen sollte:

        .container {
            padding-left: 100px;
            padding-right: 100px;
        }

Zu diesem Zeitpunkt Das Ergebnis ist, dass die linke, mittlere und rechte Spalte alle verkleinert sind, der Text jedoch weiterhin unterdrückt wird.

Der vierte Schritt besteht darin, der linken und rechten Spalte ein relatives Layout hinzuzufügen und sie dann durch Festlegen der linken und rechten Werte nach außen zu verschieben:

        .left {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100%;
            position: relative;
            left: -100px;
            background-color: red;
        }

        .right {
            float: left;
            width: 100px;
            height: 200px;
            margin-left: -100px;
            position: relative;
            right: -100px;
            background-color: yellow;
        }

Das ist es, Sie sind fertig:

Doppelte Nurflügler-Anordnung

Die ersten beiden Schritte des Doppelflügel-Layouts sind die gleichen wie beim Holy Grail-Layout, außer dass die Lösung für das Problem, dass der Inhalt in der mittleren Spalte blockiert wird, anders ist:

Da Der Inhalt im Hauptteil wird blockiert. Fügen Sie dann einen weiteren Inhalt im Hauptteil hinzu. Fügen Sie einen Inhalt hinzu und legen Sie seinen Rand fest, um eine Okklusion zu vermeiden. Das Problem kann gelöst werden:

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        .main {
        float: left;
        width: 100%;
        }
        .content {
        height: 200px;
        margin-left: 110px;
        margin-right: 220px;
        background-color: green;
        }
        
        .main::after {
        display: block;
        content: &#39;&#39;;
        font-size: 0;
        height: 0;
        clear: both;
        zoom: 1;
        }
    .left {
        float: left;
        height: 200px;
        width: 100px;
        margin-left: -100%;
        background-color: red;
    }
    .right {
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
        background-color: blue;
    }   
    </style>
</head>
<body>
    <p class="main">
        <p class="content"></p>
    </p>
    <p class="left"></p>
    <p class="right"></p>
</body>
</html>

Das Einzige, was beachtet werden muss, ist, dass es im Hauptteil stehen muss. Fügen Sie danach ein Element hinzu, um den Float zu löschen.

5. Flex-Layout

Flex-Layout ist auch sehr einfach, um ein dreispaltiges Layout zu implementieren, aber Sie müssen darauf achten Browserkompatibilität:

        <style type="text/css">
            .container {
                display: flex;
                flex-direction: row;
            }
            .middle {
                height: 200px;
                background-color: red;
                flex-grow: 1;
            }

            .left {
                height: 200px;
                order: -1;
                margin-right: 20px;
                background-color: yellow;
                flex: 0 1 200px;
            }

            .right {
                height: 200px;
                margin-left: 20px;
                background-color: green;
                flex: 0 1 200px;
            }
        </style>
    </head>
    <body>
        <p class="container">
            <p class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</p>
            <p class="left"></p>
            <p class="right"></p>
        </p>
    </body>

Es gibt ein paar Dinge zu beachten:

main muss zuerst geschrieben werden, wenn Es muss zuerst geladen werden, aber weil left Es muss ganz links angezeigt werden, daher muss die Reihenfolge von links auf -1 gesetzt werden

Die vollständige Schreibmethode des Das Flex-Attribut lautet: Flex: Flex-Grow Flex-Shrink Flex-Basis. Dies ist auch der Kern des dreispaltigen Layouts von Flex. Dies bedeutet, dass der gesamte zusätzliche Platz dem Main zugewiesen wird Da die Flex-Basis des linken und rechten Teils angegeben ist, erhöhen Sie gleichzeitig die Breite beider, um den Anzeigeeffekt sicherzustellen

Die absolute Positionierung ist ebenfalls relativ einfach und kann zuerst geladen werden. Betreff:

Der obige Inhalt handelt von sechs klassischen dreispaltigen CSS-Layoutplänen. Ich hoffe, er kann allen helfen.

Verwandte Empfehlungen:

Beim Layout der Webseite zuerst HTML oder zuerst CSS schreiben?

Auf der Webseite Layout von HTML Was ist der Unterschied zwischen div und span

Welche Techniken gibt es für das CSS-Layout

Das obige ist der detaillierte Inhalt vonSechs klassische CSS-Lösungen für das dreispaltige Layout. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Ausführliche Erläuterung der Unterschiede zwischen schreibgeschützt, deaktiviert, angezeigt und sichtbarNächster Artikel：Ausführliche Erläuterung der Unterschiede zwischen schreibgeschützt, deaktiviert, angezeigt und sichtbar

In Verbindung stehende Artikel

Mehr sehen