16 Beispiele für sehr gute grundlegende CSS-Layouts_Grundlegendes Tutorial

Einzelne Zeile und einzelne Spalte

Einzelne Zeile und einzelne Spalte 1: Verwenden Sie Float, um in der oberen linken Ecke zu schweben, feste Breite.

#content: left; padding: 20px; border: 5px solid #666; ""; voice-family:inherit; width: 370px }html>body

Einzelne Zeile und einzelne Spalte 2: In der oberen linken Ecke fixiert, feste Breite, unter Verwendung absoluter Positionierung. #content { Position: absolut; links: 0px; Rand: 5px solide #666; /* ie5win fudge beginnt */ -family: "\"}\""; voice-family:inherit; width: 370px }html>body #content { width: 370px

Einzelne Zeile und einzelne Spalte 3

: In der oberen linken Ecke fixiert, keine feste Breite, verwenden Sie einen Prozentsatz (%), um die Breite zu definieren und sie an die Seite anzupassen.

Einzelne Zeile und einzelne Spalte 4

(empfohlen): Feste Breite, Verwendung des im Textkörperstil definierten Zentrierungsattributs (text-align: center;), um die Seite automatisch zu zentrieren. Einzelne Zeile und zwei Spalten

Einzelne Zeile und zwei Spalten 1: Beide Spalten haben eine feste Breite. Die erste Spalte schwebt in der oberen linken Ecke und die zweite Spalte schwebt rechts von der ersten Spalte.

Einzelne Zeile und zwei Spalten 2

: Beide Spalten haben eine prozentuale Breite, passen aber nicht auf den Bildschirm. Die erste Spalte ist an der oberen linken Ecke befestigt und die zweite Spalte schwebt rechts von der ersten Spalte.

Einzelne Zeile und zwei Spalten 3

: Beide Spalten haben eine prozentuale Breite und füllen den Bildschirm aus. Beide Säulen sind absolut positioniert.

Einzelne Zeile und zwei Spalten 4

: Beide Spalten haben eine prozentuale Breite und füllen den Bildschirm aus. Die erste Spalte schwebt in der oberen linken Ecke und die zweite Spalte schwebt in der oberen rechten Ecke.

Einzelne Zeile und zwei Spalten 5

: Beide Spalten haben eine prozentuale Breite und füllen den Bildschirm aus. Die erste Spalte schwebt in der oberen linken Ecke und die zweite Spalte schwebt rechts von der ersten Spalte. Einzelne Zeile und drei Spalten

Einzelne Zeile und drei Spalten 1: Sowohl die linke als auch die rechte Spalte sind absolut positioniert (die rechte Spalte ist oben rechts positioniert). Die linke und rechte Spalte haben feste Breiten und die mittlere Spalte passt sich der Seite an.

Einzelne Zeile und drei Spalten 2

: Die linke Spalte befindet sich oben links, die rechte Spalte befindet sich oben rechts und die mittlere Spalte schwebt rechts von der linken Spalte. Die linke und rechte Spalte haben feste Breiten und die mittlere Spalte passt sich der Seite an.

Einzelne Zeile und drei Spalten 3

: Alle drei Spalten sind absolut positioniert. Die linke und rechte Spalte haben feste Breiten und die mittlere Spalte passt sich dem Inhalt an.

Einzelne Zeile und drei Spalten 4

(empfohlen): Ähnlich wie Stil 2, außer dass das Attribut „margin: 20px“ zum Textstil hinzugefügt wird, wodurch das Problem gelöst wird, dass die mittlere Spalte in Netscape 6.0 oben liegt.

Einzelne Zeile und drei Spalten 5

: Die linke und rechte Spalte sind absolut positioniert und die mittlere Spalte ist adaptiv. Volle Bildschirmbreite.

Drei Spalten in der oberen Reihe

Drei Spalten in der oberen Reihe 1(empfohlen): Die obere Reihe passt sich der Seitenbreite an. Die linke und rechte Spalte sind absolut positioniert und die mittlere Spalte passt sich der Seite an.

• Obere Reihe drei Spalten 2

: volle Bildschirmbreite