Häufig verwendete Methoden für das CSS-Layout: float:none|left|right
Wert:
none:?Standardwert. Objekt schwimmt nicht
links: Text fließt rechts vom Objekt
rechts: Text fließt links vom Objekt
Wie es funktioniert, sehen Sie sich ein Beispiel mit einer Zeile und zwei Spalten an
xhtml-Code:
| Nachfolgend der zitierte Inhalt: <div id="wrap"> <div id="column1">Dies ist die erste Spalte</div> <div id="column2">Dies ist die zweite Spalte</div> <div class="clear"></div> /*Dies widerspricht der Absicht des Webstandards, es bedeutet lediglich, dass die darunter liegenden Elemente gelöscht werden müssen*/ </div> |
CSS-Code:
| Nachfolgend der zitierte Inhalt: #wrap{width:100;height:auto;} #column1{float:left;width:40;} #column2{float:right;width:60;} .clear{clear:both;} |
Position:statisch|absolut|fest|relativ
Wert:
static:?Standardwert. Keine spezielle Positionierung, das Objekt folgt den HTML-Positionierungsregeln
Absolut:? Ziehen Sie das Objekt aus dem Dokumentfluss und verwenden Sie die Attribute „Links“, „Rechts“, „Oben“, „Unten“ und andere, um eine absolute Positionierung relativ zu seinem nächstgelegenen übergeordneten Objekt mit den meisten Positionierungseinstellungen durchzuführen. Wenn kein solches übergeordnetes Objekt vorhanden ist, wird das Body-Objekt verwendet. Und seine Kaskade wird durch das Z-Index-Attribut definiert
behoben:?Nicht unterstützt. Die Objektpositionierung folgt der absoluten Methode. Es gibt jedoch einige Regeln, die beachtet werden müssen
relative:?Objekte können nicht gestapelt werden, werden aber im normalen Dokumentenfluss basierend auf den Attributen links, rechts, oben, unten und anderen versetzt.
Es implementiert das Beispiel einer Zeile und zwei Spalten
xhtml-Code:
| Nachfolgend der zitierte Inhalt: <div id="wrap"> <div id="column1">Dies ist die erste Spalte</div> <div id="column2">Dies ist die zweite Spalte</div> </div> |