Wenn wir am Ende des 3-Spalten-Layouts eine Fußzeile hinzufügen möchten, um Informationen wie das Urheberrecht einzufügen. Ich bin auf das Problem gestoßen, dass ich den unteren Rand von drei Spalten ausrichten musste. Im Tabellenlayout verwenden wir die Methode, große Tabellen in kleine Tabellen zu verschachteln, wodurch die drei Spalten problemlos am div-Layout ausgerichtet werden können. Die drei Spalten sind unabhängig voneinander verstreut und der Inhalt ist unterschiedlich hoch, was die Ausrichtung erschwert. Tatsächlich können wir Divs vollständig verschachteln und drei Spalten in einem DIV zusammenfassen, um eine untere Ausrichtung zu erreichen. Das Folgende ist ein Implementierungsbeispiel (ein weißes Hintergrundfeld simuliert eine Seite):
Körper
Der Hauptcode dieser Beispielseite lautet wie folgt:
<div id="header"></div>
<div id="mainbox">
<div id="menu"></div>
<div id="sidebar"></div>
<div id="content"></div>
</div>
<div id="footer"></div>
Die spezifischen Stylesheets sind in den entsprechenden Abschnitten beschrieben. Der entscheidende Punkt ist, dass die #mainbox-Ebene in drei Ebenen verschachtelt ist: #menu, #sidebar und #content. Wenn der Inhalt von #content zunimmt, erhöht sich auch die Höhe von #content und die Höhe von #mainbox wird ebenfalls erweitert, und die #footer-Ebene wird automatisch nach unten verschoben. Dadurch wird ein hohes Maß an Anpassungsfähigkeit erreicht.
Es ist auch erwähnenswert, dass #menu und #content auf der rechten Seite der Seite „FLOAT: right;“ schweben und #sidebar auf der linken Seite der #menu-Ebene „FLOAT: left;“ schwebt Floating-Methodenpositionierung, Sie können auch die absolute Positionierung verwenden, um diesen Effekt zu erzielen.
Ein weiteres Problem bei dieser Methode besteht darin, dass der Hintergrund der Seitenleiste #sidebar nicht 100 % sein kann. Die allgemeine Lösung besteht darin, es mit der Hintergrundfarbe des Körpers zu füllen. (Die Hintergrundfarbe von #mainbox kann nicht verwendet werden, da die Hintergrundfarbe von #mainbox in Browsern wie Mozilla ungültig ist.)
Okay, das Hauptgerüst ist gebaut, die verbleibende Arbeit besteht nur noch darin, Ziegel und Fliesen hinzuzufügen. Wenn Sie andere Layouts ausprobieren möchten, empfehle ich die Lektüre der folgenden Artikel:
16 Beispiele für CSS-Layout
onestab: Demonstration des dreispaltigen zusammengesetzten Layouts
onestab: frei dehnbares dreispaltiges Layout
