In CSS gibt es zwei Möglichkeiten, das Spaltenlayout zu implementieren. Die erste Methode besteht darin, die absolute Positionierung (absolute Positionierung) unter den vier CSS-Positionierungsoptionen (absolut, statisch, relativ und fest) zu verwenden, wodurch ein Element im Dokument von seiner ursprünglichen Position entfernt und an einer beliebigen Stelle neu positioniert werden kann. Die zweite besteht darin, das Float-Konzept in CSS zu verwenden.
Durch absolute Positionierung oder Floating können Säuleneffekte erzielt werden. Die beiden können unabhängig voneinander verwendet oder miteinander kombiniert werden, um sich gegenseitig zu ergänzen.
1. Absolute Positionierung Der Vorteil der absoluten Positionierung besteht darin, dass wir die Position jedes Elements präzise steuern können – es sind weder Rätselraten noch Glück erforderlich. Da ein absolut positioniertes Element vollständig und spurlos aus dem regulären Dokumentenfluss entfernt wird, hat es keine Auswirkungen auf andere Elemente.
Versuchen wir also, das folgende Layout mithilfe der absoluten Positionierung zu implementieren.
Dies ist ein dreispaltiges Layout und zentriert. Dabei ist Spalte A die Hauptinhaltsspalte und die Spalten B und C sind Nebenspalten. Erstens können wir die drei Spalten A, B und C nicht direkt in der Mitte positionieren, da die Auflösung der Monitore jeder Person unterschiedlich ist. Der Zentrierungseffekt der Positionierung auf einem Monitor mit einer Auflösung von 1024 x 768 wird Bei anderen Auflösungen funktioniert der Effekt definitiv nicht. Wie lässt sich dieses Problem lösen?
Glücklicherweise gibt es im absoluten Positionierungsmodell eine äußerst nützliche Funktion: Wenn der Container eines absolut positionierten Elements ebenfalls positioniert wurde, basieren die vom Element angegebenen oberen und linken Werte nicht auf dem Wurzelelement html des Dokuments (ist auch die obere linke Ecke des Browserfensters), aber der Offset wird basierend auf der oberen linken Ecke seines Containers berechnet. Mit anderen Worten: Der positionierte Container fungiert als Ausgangspunkt für die absolute Positionierung aller darin enthaltenen Elemente.
Daher fügen wir mit dieser Funktion einen Container D außerhalb der Spalten A, B und C hinzu, wie unten gezeigt:
Dann zentrieren wir Container D und fügen ihm ein Attribut hinzu: position:relative. Auf diese Weise verwenden wir die absolute Positionierung, um die oberen und linken Werte von A, B und C zu positionieren. Die Positionen von A, B und C basiert auf Container D. Die Position der oberen linken Ecke wird berechnet, sodass der gewünschte dreispaltige Zentrierungseffekt erzielt werden kann.
Unser häufig verwendetes Layout ist jedoch nicht so einfach. Zusätzlich zu drei Spalten benötigen wir auch eine Kopf- und eine Fußzeile, wie unten gezeigt:
Zu diesem Zeitpunkt funktioniert die Verwendung eines absolut positionierten Layouts nicht, da das absolut positionierte Element vollständig aus dem Dokumentfluss entfernt wird. Zu diesem Zeitpunkt befindet sich die Fußzeile neben der Kopfzeile und wird unter der Kopfzeile angezeigt.
Wenn wir die absolute Positionierung verwenden müssen, müssen wir die Höhe jeder der drei Spalten im Voraus kennen und dann die Fußzeile basierend auf der höchsten Spalte positionieren. Wenn die Länge des Textes in einer Spalte nicht bestimmt werden kann, können wir zusätzlich zur Verwendung von JavaScript nur die Idee der absoluten Positionierung aufgeben und stattdessen in die Umstellung auf ein schwebendes Layout investieren.
2. Floating
Die ursprüngliche Absicht des Floatings besteht darin, das in den Artikel eingefügte Bild nach links oder rechts zu schweben, sodass der Text unter dem Bild automatisch umbrochen wird und links oder rechts kein großer Leerraum entsteht rechte Seite des Bildes.
Obwohl die Syntax von Floating einfach ist, ist sie nicht so einfach zu beherrschen. Lassen Sie uns ein Beispiel für die Verwendung von Floating zum Layout geben. Ebenso werden wir ein dreispaltiges Layout mit einer Fußzeile implementieren. Wie unten gezeigt:
Wie kann man mit Float einen solchen Effekt erzielen? Tatsächlich ist es sehr einfach:
1. Stellen Sie die Breite von E und die Mitte von E ein.
2. Stellen Sie die Breite von A, B und C ein und verschieben Sie A, B und C nach links.
3. Stellen Sie den Abstand ein Attribut für die Fußzeile Es
muss erklärt werden, dass das Floating-Layout immer noch dem regulären Dokumentfluss folgt. Im Vergleich zur absoluten Positionierung ist die Position der Elementdeklaration in der HTML-Quelldatei bei der Floating-Positionierung besonders wichtig. Der einfachste Weg, dieses Problem zu lösen, besteht natürlich darin, die Deklarationsreihenfolge der linken und rechten Spalte in der Quelldatei zu vertauschen. Es gibt jedoch auch Möglichkeiten, das gleiche Layout zu erreichen, ohne die Reihenfolge der Spalten zu ändern Die Verwendung eines Vergleichs ist eine unklare Möglichkeit, negative Margin-Werte zu verwenden. Unter normalen Umständen werden sich Benutzer höchstwahrscheinlich dafür entscheiden, die Reihenfolge der Deklarationen in der linken und mittleren Spalte der Quelldatei zu vertauschen.