Teilen Sie eine Zusammenfassung der Implementierung des zweispaltigen CSS-Layouts

Dieser Artikel stellt hauptsächlich eine Zusammenfassung der Implementierung des zweispaltigen CSS-Layouts vor und erörtert einige Praktiken und Probleme, einschließlich der Methoden „Absolute + Margin“ und „Float + Margin“. Freunde in Not können sich auf „Zweispaltig“ beziehen Layout Es handelt sich wahrscheinlich um die klassischste Methode zum Layouten von Webseiten, und dieser Blog verwendet dieses Layout. In einem zweispaltigen Layout ist es am häufigsten, dass die Hauptspalte (Hauptspalte) eine adaptive Breite und die Unterspalte (Seitenleiste) eine feste Breite hat.

Lassen Sie uns heute besprechen, wie dieses Layout mit fester Breite und adaptivem Zwei-Spalten-Layout implementiert wird.

1. Absolut + Margin-Methode

Das erste, was mir in den Sinn kommt, ist die Verwendung der Absolut + Margin-Methode. Schauen wir uns zunächst den Code an:

<p class="container">
    <p class="sidebar">子列</p>
    <p class="main">主列</p>
</p>

.container {   
 position: relative;   
}   
.sidebar {   
 position: absolute;   
 top: 0;   
 left: 0;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

Diese Methode verwendet die Position, um die Seitenleistenspalte vom Dokumentfluss zu trennen, und entfernt dann den von der Seitenleiste abgedeckten Teil Spalte durch den linken Rand der Hauptspalte. Auf diese Weise haben wir ein Layout mit fester Breite und adaptivem Zwei-Spalten-Layout erreicht.

(1) Anpassung der Spaltenreihenfolge

Ohne den HTML-Code zu ändern, ändern Sie einfach das CSS. Wir können die Reihenfolge der linken und rechten Spalten vertauschen, siehe Code:

.sidebar {   
 position: absolute;   
 top: 0;   
 rightright: 0;   
}   
.main {   
 margin-right: 210px;   
}

(2) Die Hauptinhaltsspalte wird zuerst angezeigt

Lassen Sie uns perfekter darüber nachdenken, können wir die Hauptspalte platzieren? es vor der Seitenleistenspalte platzieren, damit der Hauptinhalt zuerst geladen und gerendert wird? Lass es uns versuchen!

<p class="container">
    <p class="main">主列</p>
 <p class="sidebar">子列</p>
</p>

Nehmen Sie einfach die oben genannten einfachen Anpassungen vor, es sind keine CSS-Änderungen erforderlich!

(3) Das Problem

Obwohl diese Methode viele Vorteile hat, weist sie einen fatalen Mangel auf. Da die Seitenleistenspalte vom Dokumentfluss getrennt ist, wird die Seitenleistenspalte, wenn sie höher als die Hauptspalte ist, das nachfolgende Layout abdecken: Problemdemo.

Wenn Sie overflow:hidden zum Container hinzufügen, wird der Überlaufteil der Seitenleiste abgeschnitten. In diesem Layout gibt es wirklich keine wirksame Lösung für dieses Problem.

2. Float + Margin-Methode

Dann fällt mir Float + Margin ein, um ein zweispaltiges Layout zu implementieren. Erstens hat die linke Spalte eine feste Breite und der Hauptinhalt ist adaptiv. Der Code lautet wie folgt:

<p class="sidebar">子列</p>
<p class="main">主列</p>

.sidebar {   
 float: left;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-left: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

Diese Implementierung ist relativ einfach. Lassen Sie zunächst die Unterspalte nach links gleiten und setzen Sie dann den Rand links auf die Hauptspalte um Platz für die Unterspalte zu lassen. Zeigen Sie einfach den Platz an.

Unterstützt diese Methode also den Austausch von Spaltenpositionen? Sicher. Der CSS-Code lautet wie folgt:

.sidebar {   
 float: rightright;   
 width: 200px;   
 height: 300px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.main {   
 height: 300px;   
 margin-right: 210px;   
 background-color: rgba(0, 255, 0, .5);   
}

Das Problem:

Es scheint, dass die Float + Margin-Methode ein guter Weg ist, aber die Hauptspalte haben wir erwähnt Eine frühere Anzeigeoptimierung kann nicht erreicht werden.

3. Float + negative Margin-Methode

Ohne weitere Umschweife gehen wir direkt zum Code:

<p class="main-wrapper">
    <p class="main">主列</p>
</p>
<p class="sidebar">子列</p>

.main-wrapper {   
 float: left;   
 width: 100%;   
}   
.main {   
 height: 100px;   
 margin-left: 210px;   
 background-color: rgba(255, 0, 0, .5);   
}   
.sidebar {   
 float: left;   
 width: 200px;   
 height: 100px;   
 margin-left: -100%;   
 background-color: rgba(0, 255, 0, .5);   
}

Jedem dürfte aufgefallen sein, dass es sich um ein Doppelflügel-Layout handelt und die Hauptspalte zuerst angezeigt wird. Der Implementierungsprozess ist wie folgt:

Erst die Hauptspalte und die Seitenleistenspalte schweben lassen und dann die Seitenleistenspalte durch den negativen Rand korrekt positionieren.

Verschachteln Sie die Hauptspalte in einem p und legen Sie den Breitenwert von p auf 100 % fest.

Stellen Sie abschließend den linken Rand der Hauptspalte ein, um den von der Seitenleiste abgedeckten Teil zu entfernen.

Das obige ist der detaillierte Inhalt vonTeilen Sie eine Zusammenfassung der Implementierung des zweispaltigen CSS-Layouts. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!