Erstellen Sie ein dreispaltiges Seitenlayout mit CSS floats_Experience Exchange

Das dreispaltige Layout ist derzeit das gebräuchlichste Webseitenlayout. Der Inhalt der Hauptseite wird in der mittleren Spalte platziert, und die beiden Spalten an der Seite werden mit Navigationslinks und anderen Inhalten platziert. Das Grundlayout platziert im Allgemeinen drei Spalten unter dem Titel, und die drei Spalten nehmen die gesamte Seitenbreite ein. Schließlich wird eine Fußzeile am unteren Rand der Seite platziert, und die Fußzeile nimmt ebenfalls die gesamte Seitenbreite ein.

Die meisten Webdesigner sind mit traditionellen Webdesign-Techniken vertraut, die zum Erstellen von Layouts mit Tabellen, zum Erstellen von Layouts mit fester Breite oder „flüssigen“ Layouts (die automatisch basierend auf der Breite des Browsers des Benutzers skaliert und verkleinert werden) verwendet werden können Fenster) Webseite.

Da wir uns jetzt alle von tabellenbasierten Layouttechniken entfernen, suchen viele Webdesigner nach dem neuen Paradigma des XHTML-Markups und der CSS-Formatierung, um dreispaltige Layouts zu erstellen. Es ist nicht schwierig, mithilfe der absoluten Positionierung ein Layout mit fester Breite aus CSS zu erhalten. Ein flüssiges Layout ist jedoch etwas schwieriger. Daher stellt dieser Artikel eine Methode vor, um mithilfe der CSS-Eigenschaften float und clear ein dreispaltiges Flüssigkeitslayout zu erhalten.

Grundlegende Methode
Das Grundlayout enthält fünf Divs, nämlich Titel, Fußzeile und drei Spalten. Kopf- und Fußzeile nehmen die gesamte Breite der Seite ein. Das Div der linken Spalte und das Div der rechten Spalte haben beide eine feste Breite, und das Float-Attribut wird verwendet, um sie auf die linke und rechte Seite des Browserfensters zu drücken. Die mittlere Spalte nimmt tatsächlich die gesamte Seitenbreite ein und der Inhalt der mittleren Spalte „fließt“ zwischen der linken und rechten Spalte. Da die Breite des mittleren Spaltenbereichs nicht festgelegt ist, kann er je nach Änderungen im Browserfenster je nach Bedarf erweitert und verkleinert werden. Die Auffülleigenschaften auf der linken und rechten Seite des mittleren Spaltenbereichs sorgen dafür, dass der Inhalt in einer übersichtlichen Spalte angeordnet wird, auch wenn er sich bis zum unteren Rand der Seitenleiste (linke oder rechte Spalte) erstreckt.

Ein Beispiel für ein dreispaltiges Layout
Bitte schauen Sie sich ein Beispiel für ein dreispaltiges Layout unter Verwendung der in diesem Artikel vorgestellten Techniken an. In diesem Beispiel werden helle Farben verwendet, um die verschiedenen Bereiche des Layouts zu unterscheiden.

Das Folgende ist der XHTML-Code:

Header

Text auf der Backbordseite...

Text auf der Steuerbordseite...

Text in der mittleren Spalte.. . 🎜>body {
margin: 0px;

padding: 0px;
div#header {

height: 50px; Aqua;
padding: 1px;
div#left {

width: 150px;
div#right { float: right;
background-color: green;
div#middle {
padding: 0px 160px 5px 160px; > Rand: 0 px ;
Hintergrundfarbe: Silber;
div#footer {
Hintergrundfarbe: gelb; 🎜>