Testen Sie Ihre Fähigkeiten: Floats
Das Ziel dieses Fähigkeitstests ist es festzustellen, ob Sie Floats in CSS mit Hilfe der float und clear Eigenschaften und Werte sowie anderer Methoden zum Löschen von Floats verstehen. Sie werden drei kleine Aufgaben bearbeiten, die unterschiedliche Elemente des Materials, das Sie gerade behandelt haben, verwenden.
Hinweis: Sie können Lösungen in den interaktiven Editoren auf dieser Seite oder in einem Online-Editor wie CodePen, JSFiddle oder Glitch ausprobieren.
Wenn Sie hängen bleiben, können Sie sich über einen unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
In dieser Aufgabe müssen Sie die beiden Elemente mit einer Klasse von float1 und float2 links bzw. rechts floaten. Der Text sollte dann zwischen den beiden Kästchen erscheinen, wie im Bild unten dargestellt:
Versuchen Sie, den unten stehenden Live-Code zu aktualisieren, um das fertige Beispiel zu reproduzieren:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 2
In dieser Aufgabe sollte das Element mit einer Klasse von float nach links floaten. Dann möchten wir, dass die erste Textzeile neben diesem Element angezeigt wird, die folgende Textzeile (die eine Klasse von below hat) jedoch darunter angezeigt wird.
Ihr Endergebnis sollte wie das Bild unten aussehen:
Versuchen Sie, den unten stehenden Live-Code zu aktualisieren, um das fertige Beispiel zu reproduzieren:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.
Aufgabe 3
In dieser Aufgabe haben wir ein gefloatetes Element. Der Kasten, der den Float und den Text umschließt, wird hinter dem Float angezeigt. Verwenden Sie die modernste verfügbare Methode, um den Kastenhintergrund zu veranlassen, sich bis unter den Float zu erstrecken, wie im Bild unten dargestellt:
Versuchen Sie, den unten stehenden Live-Code zu aktualisieren, um das fertige Beispiel zu reproduzieren:
Laden Sie den Ausgangspunkt für diese Aufgabe herunter, um in Ihrem eigenen Editor oder in einem Online-Editor zu arbeiten.