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. 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. 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
Docker verwendet Nextcloud, um eine private Baidu-Cloud-Festplatte zu erstellen
Plötzlich musste ich einen privaten Dienst für di...
Dateisicherungslösung zwischen Servern: Wie sichere ich Serverdateien automatisch auf einem anderen Server?
Viele Organisationen müssen Dateiserver sichern u...
Referenzieren Sie SVG-Bilder in CSS, um den Implementierungscode für dynamische Farbumschaltung zu unterstützen
Wenn wir ein SVG-Bild zur Anzeige hinzufügen, erh...
Detaillierte Erläuterung des Problems, dass der Speicherplatz nach dem Löschen der Linux-Datei nicht freigegeben wird
Vorwort Wenn der Systemspeicherplatz zu groß ist ...
Vue + ElementUI implementiert Paging-Funktion - MySQL-Daten
Inhaltsverzeichnis 1. Problem 2. Lösung 2.1 Pagin...
Detaillierte Erklärung einiger häufig verwendeter Schriftgrößen, Schrifteinheiten und Zeilenhöhen in CSS
px (Pixel) Ich glaube, jeder ist mit dem Begriff ...
Einfaches Beispiel für die Definition und Verwendung von MySQL-Triggern
Dieser Artikel beschreibt die Definition und Verw...
So entwerfen und optimieren Sie MySQL-Indizes
Inhaltsverzeichnis Was ist ein Index? Prinzip der...
Vue implementiert einen vollständigen Prozessdatensatz einer einzelnen Dateikomponente
Inhaltsverzeichnis Vorwort Einzelne Dateikomponen...
Einführung und Verwendung von Triggern und Cursorn in MySQL
Trigger-Einführung Ein Trigger ist eine spezielle...
Farben werden in HTML durch 6-stellige Hexadezimalcodes, RGB oder Schlüsselwörter dargestellt.
Es gibt drei Möglichkeiten, Farben in HTML darzust...
5 coole und praktische Einführung in HTML-Tags und -Attribute
Tatsächlich handelt es sich auch hier um einen Cl...
Beispielcode zur Implementierung der MySQL-Master-Slave-Replikation in Docker
Inhaltsverzeichnis 1. Übersicht 1. Grundsatz 2. U...
Verbessern Sie die Effizienz der Seitencodeänderung und beherrschen Sie die Kernkenntnisse der HTML-Sprache
Beim Erstellen einer Website scheint die HTML-Spra...
Implementierung der Einzelprozesssteuerung des Linux C-Hintergrunddienstprogramms
einführen Normalerweise muss ein Hintergrundserve...