Mehrere Methoden und Vor- und Nachteile der Implementierung eines dreispaltigen Layouts mit CSS

Mehrere Methoden und Vor- und Nachteile der Implementierung eines dreispaltigen Layouts mit CSS

Vorwort

Das dreispaltige Layout ist, wie der Name schon sagt, auf beiden Seiten fix und in der Mitte adaptiv. Das dreispaltige Layout ist in der tatsächlichen Entwicklung sehr verbreitet. Beispielsweise weist die Homepage von Taobao ein typisches dreispaltiges Layout auf: Die Produktnavigation links und die Navigation rechts haben feste Breiten, und der Hauptinhalt in der Mitte passt sich der Browserbreite an.

Nehmen wir ein Layout wie dieses an: Die Höhe ist bekannt, die Breite der linken und rechten Spalte beträgt jeweils 300 Pixel und die Mitte ist adaptiv. Auf wie viele Arten kann dies erreicht werden? Und was sind ihre jeweiligen Vor- und Nachteile?

Klicken Sie bitte auf den Quellcode mit dem dreispaltigen Layout, um den Quellcode dieses Artikels anzuzeigen. Stern und Gabel sind willkommen.

1. Schwebendes Layout

<!DOCTYPE html>
<html>
<Kopf>
    <meta charset="utf-8">
    <title>Layout</title>
    <style media="Bildschirm">
        html * {
            Polsterung: 0;
            Rand: 0;
        }
        .layout Artikel div {
            Mindesthöhe: 150px;
        }
    </Stil>
</Kopf>
<Text>
    <!--Floating-Layout-->
    <Abschnitt Klasse="Layout Float">
        <style media="Bildschirm">
            .layout.float .links {
                schweben: links;
                Breite: 300px;
                Hintergrund: rot;
            }
            .layout.float .center {
                Hintergrund: gelb;
            }
            .layout.float .rechts {
                schweben: rechts;
                Breite: 300px;
                Hintergrund: blau;
            }
        </Stil>
        <h1>Dreispaltiges Layout</h1>
        <Artikelklasse="links-rechts-mitte">
            <div Klasse="links"></div>
            <div class="right"></div> // Die rechte Spalte sollte vor dem mittleren Inhalt geschrieben werden<div class="center">
                <h2>Schwimmende Lösungen</h2>
                1. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 2. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 3. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 4. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 5. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 6. Dies ist eine schwebende Lösung für ein dreispaltiges Layout;
            </div>
        </Artikel>
    </Abschnitt>
</body>
</html>

Für dieses Layout muss die DOM-Struktur zuerst mit dem Floating-Teil und dann mit dem mittleren Block geschrieben werden, da sonst der rechte Floating-Block in die nächste Zeile fällt.
Der Vorteil des schwebenden Layouts besteht darin, dass es relativ einfach ist und eine bessere Kompatibilität aufweist. Das schwebende Layout hat jedoch Einschränkungen. Schwebende Elemente sind vom Dokumentfluss getrennt und müssen gelöscht werden. Wenn dies nicht richtig gehandhabt wird, führt dies zu vielen Problemen, beispielsweise zum Höheneinbruch des übergeordneten Containers.

2. Absolutes Layout

   <!--Absolutes Layout-->
    <Abschnitt Klasse="layout absolut">
        <Stil>
            .layout.absolute .links-mitte-rechts>div{
                position: absolute; // Alle drei Blöcke sind absolut positioniert}
            .layout.absolut .links {
                links: 0;
                Breite: 300px;
                Hintergrund: rot;
            }
            .layout.absolute .center {
                rechts: 300px;
                links: 300px;//300px links und rechts Hintergrund: gelb;
            }
            .layout.absolut .rechts {
                rechts: 0;
                Breite: 300px;
                Hintergrund: blau;
            }
        </Stil>
        <h1>Dreispaltiges Layout</h1>
        <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                <h2>Absolute Positionierungslösung</h2>
                1. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 2. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 3. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 4. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 5. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 6. Dies ist eine schwebende Lösung für ein dreispaltiges Layout;
            </div>
            <div Klasse="rechts"></div>
        </Artikel>
    </Abschnitt>

Die Vorteile des Layouts mit absoluter Positionierung liegen darin, dass es schnell und einfach einzurichten ist und nicht fehleranfällig ist. Der Nachteil besteht darin, dass der Container außerhalb des Dokumentflusses liegt und die untergeordneten Elemente ebenfalls außerhalb des Dokumentflusses liegen. Wenn die Höhe unbekannt ist, treten Probleme auf, was zu einer schlechten Wirksamkeit und Benutzerfreundlichkeit dieser Methode führt.

3. Flexbox-Layout

    <!--Flexbox-Layout-->
    <Abschnitt Klasse="Layout Flexbox">
        <Stil>
            .layout.flexbox .links-mitte-rechts{
                Anzeige: Flex;
            }
            .layout.flexbox .links {
                Breite: 300px;
                Hintergrund: rot;
            }
            .layout.flexbox .center {
                Hintergrund: gelb;
                biegen: 1;
            }
            .layout.flexbox .rechts {
                Breite: 300px;
                Hintergrund: blau;
            }
        </Stil>
        <h1>Dreispaltiges Layout</h1>
        <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                <h2>Flexbox-Lösung</h2>
                1. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 2. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 3. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 4. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 5. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 6. Dies ist eine schwebende Lösung für ein dreispaltiges Layout;
            </div>
            <div Klasse="rechts"></div>
        </Artikel>
    </Abschnitt>

Das Flexbox-Layout ist eine Neuheit in CSS3. Es wurde entwickelt, um die Mängel der beiden oben genannten Methoden zu beheben und ist eine perfektere Methode. Aktuell wird für das Layout mobiler Endgeräte ebenfalls Flexbox eingesetzt. Der Nachteil von Flexbox besteht darin, dass es nur in IE10 unterstützt wird, die IE10-Version jedoch im -ms-Format vorliegt.

4. Tabellenlayout

<!--Tabellenlayout-->
    <Abschnitt Klasse="Layouttabelle">
        <Stil>
            .layout.tabelle .links-mitte-rechts {
                Anzeige: Tabelle;
                Höhe: 150px;
                Breite: 100 %;
            }
            .layout.tabelle .links-mitte-rechts>div {
                Anzeige: Tabellenzelle;
            }
            .layout.tabelle .links {
                Breite: 300px;
                Hintergrund: rot;
            }
            .layout.tabelle .center {
                Hintergrund: gelb;
            }
            .layout.tabelle .rechts {
                Breite: 300px;
                Hintergrund: blau;
            }
        </Stil>
        <h1>Dreispaltiges Layout</h1>
        <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                <h2>Tabellenlayout-Lösung</h2>
                1. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 2. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 3. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 4. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 5. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 6. Dies ist eine schwebende Lösung für ein dreispaltiges Layout;
            </div>
            <div Klasse="rechts"></div>
        </Artikel>
    </Abschnitt>

Die Kompatibilität des Tabellenlayouts ist sehr gut (siehe Abbildung unten). Wenn das Flex-Layout nicht kompatibel ist, können Sie das Tabellenlayout ausprobieren. Wenn der Inhalt überläuft, wird das übergeordnete Element automatisch erweitert.

Auch das Tabellenlayout weist Mängel auf: ① Es ist unmöglich, Spaltenränder festzulegen; ② Es ist nicht SEO-freundlich; ③ Wenn die Höhe einer Zelle den Grenzwert überschreitet, werden auch die Zellen auf beiden Seiten höher, aber manchmal ist das nicht der gewünschte Effekt.


5. Rasterlayout

    <!--Rasterlayout-->
    <Abschnitt Klasse="Layoutraster">
        <Stil>
            .layout.grid .links-mitte-rechts {
                Anzeige: Raster;
                Breite: 100 %;
                Rastervorlagenspalten: 300px, automatisch 300px;
                grid-template-rows: 150px; //Zeilenhöhe}
            .layout.raster .links {
                Hintergrund: rot;
            }
            .layout.raster .center {
                Hintergrund: gelb;
            }
            .layout.grid .rechts {
                Hintergrund: blau;
            }
        </Stil>
        <h1>Dreispaltiges Layout</h1>
        <Artikelklasse="links-mitte-rechts">
            <div Klasse="links"></div>
            <div Klasse="Mitte">
                <h2>Rasterlayout-Lösung</h2>
                1. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 2. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 3. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 4. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 5. Dies ist eine schwebende Lösung für ein dreispaltiges Layout; 6. Dies ist eine schwebende Lösung für ein dreispaltiges Layout;
            </div>
            <div Klasse="rechts"></div>
        </Artikel>
    </Abschnitt>

CSS Grid ist das leistungsstärkste und einfachste Tool zum Erstellen von Rasterlayouts. Rasterlayouts ermöglichen Webdesignern genau wie Tabellen, Elemente in Spalten oder Zeilen auszurichten. Im Gegensatz zu Tabellen verfügen Rasterlayouts jedoch über keine Inhaltsstruktur, sodass es nicht möglich ist, verschiedene Layouts wie bei Tabellen zu erstellen. Beispielsweise können sich alle untergeordneten Elemente in einem Rasterlayout so positionieren, dass sie sich überlappen und ähnlich positioniert sein können.

Allerdings ist die Kompatibilität des Rasterlayouts nicht gut. Wird auf IE10+ unterstützt, aber es werden nur einige Eigenschaften unterstützt.

VI. Fazit

Basierend auf den Vor- und Nachteilen der oben ausführlich vorgestellten fünf Layouts, welches Layout ist die beste Wahl in der tatsächlichen Entwicklung? Ich glaube, die Leser werden in ihrem Herzen ihre eigenen Antworten haben.
Ich denke, dass Flex- und Grid-Layouts das Layout in der tatsächlichen Entwicklung handhaben können. Vorausgesetzt, beide Browser unterstützen diese beiden Module, werden Sie Grid oder Flexbox für das Layout der Seite wählen? Flexbox ist ein eindimensionales Layout und kann Ihre Inhaltsblöcke nur in einer geraden Linie platzieren. Grid ist ein zweidimensionales Layout. Wie bereits kurz erwähnt, können Sie den Inhaltsblock entsprechend Ihren Designanforderungen an einer beliebigen Stelle platzieren. Sie sollten also ohne weitere Umschweife wissen, welches für Ihr Layout besser geeignet ist. Wenn Sie außerdem Kompatibilität mit niedrigeren IE-Versionen (z. B. IE8+) wünschen, können Sie über ein Tabellenlayout nachdenken.

Zum Schluss möchte ich noch eine Frage an alle stellen. Wenn der Mittelteil um die Inhaltshöhe gestreckt wird, müssen auch die linke und rechte Spalte gestreckt werden. Welches dieser fünf Layouts kann dann noch verwendet werden?

Antwort: Flex-Layout und Tabellenlayout

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

<<:  Vorteile und Probleme des XHTML CSS Website Designs

>>:  Methode zur Realisierung der Internetverbindung durch VMware Virtual Machine Bridging

Artikel empfehlen

Installationsmethode für mysql-8.0.17-winx64 unter Windows 10

1. Von der offiziellen Website herunterladen und ...

Lassen Sie sich die tiefe Kopie von js verstehen

Inhaltsverzeichnis js tiefe Kopie Methode der Dat...

Lösung für die Ausnahmen 1449 und 1045 bei der Verbindung mit MySQL

Lösung für die Ausnahmen 1449 und 1045 bei der Ve...

Zusammenfassung der HTML-Formatierungsstandards für webbasierte E-Mail-Inhalte

1. Seitenanforderungen 1) Verwenden Sie standardm...

Der komplette Prozess der iptables-Regeln in Docker geht nach dem Neustart von iptables verloren

Ursachen und Folgen 1. Wenn Sie den Ansible-Befeh...

Beispiel für das Herunterladen von Dateien mit vue+django

Inhaltsverzeichnis 1. Übersicht 2. Django-Projekt...

So weisen Sie einer Instanz in Linux eine öffentliche IP-Adresse zu

beschreiben Beim Aufruf dieser Schnittstelle müss...

Mit dem Swiper.js-Plugin ist die Implementierung von Karussellbildern ganz einfach

Swiper ist ein mit reinem JavaScript erstelltes P...

Einführung in die HTML-Methode zum Öffnen von Linkdateien mithilfe von Hyperlinks

a- und href-Attribute HTML verwendet <a> zu...

Implementierung von dynamischem REM für mobiles Layout

Dynamische REM 1. Lassen Sie uns zunächst die akt...

Tutorial zur Installation von MySQL 5.7.9 mit RPM-Paket unter CentOS 7

Aufgezeichnetes MySQL 5.7.9-Installationstutorial...

Lösung für das Problem, dass der Server bei der Installation des Pagoda Panels keine Remoteverbindung zur Datenbank herstellen kann

Ich plane, meine eigene Website zu erstellen, als...

Detaillierte Erklärung der MySQL-Gruppensortierung, um die Top N zu finden

MySQL-Gruppensortierung, um die obersten N zu fin...

Detaillierte Erläuterung des Ansichtsbeispiels zur MySQL-Ansichtsverwaltung [Hinzufügen-, Löschen-, Ändern- und Abfragevorgänge]

Dieser Artikel beschreibt anhand eines Beispiels ...

Lassen Sie uns ausführlich über das Prinzip und die Implementierung von new in JS sprechen

Inhaltsverzeichnis Definition Konstruktorkörper s...