Testen Sie Ihre Fähigkeiten: Floats
Ziel dieses Tests ist es, Ihnen zu helfen, einzuschätzen, ob Sie Floats in CSS verstehen, indem Sie die float- und clear-Eigenschaften und -Werte sowie andere Methoden zum Bereinigen von Floats verwenden. Sie werden drei kleine Aufgaben bearbeiten, die verschiedene Elemente des gerade behandelten Materials verwenden.
Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Testen Sie Ihre Fähigkeiten Leitfaden. Sie können sich auch über einen unserer Kommunikationskanäle an uns wenden.
Aufgabe 1
Um diese Aufgabe zu erfüllen, platzieren Sie die beiden Elemente mit einer Klasse von float1 und float2 jeweils links und rechts. Der Text sollte dann zwischen den beiden Boxen erscheinen, wie in dieser fertigen Darstellung gezeigt:
<div class="box">
<div class="float float1">One</div>
<div class="float float2">Two</div>
<p>The two boxes should float to either side of this text.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rebeccapurple;
color: white;
padding: 1em;
}
.float1 {
/* Add styles here */
}
.float2 {
/* Add styles here */
}
Dies ist der Anfangszustand der Aufgabe:
Klicken Sie hier, um die Lösung anzuzeigen
Sie können float für beide Boxen verwenden:
.float1 {
float: left;
}
.float2 {
float: right;
}
Aufgabe 2
Um diese Aufgabe zu erfüllen:
- Platzieren Sie das Element mit einer Klasse von
floatnach links. - Aktualisieren Sie den Code, sodass die erste Textzeile neben diesem Element angezeigt wird, aber die folgende Textzeile (die eine Klasse von
belowhat) darunter angezeigt wird.
Ihr Endergebnis sollte wie diese fertige Darstellung aussehen:
<div class="box">
<div class="float">Float</div>
<p>This sentence appears next to the float.</p>
<p class="below">Make this sentence appear below the float.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rebeccapurple;
color: white;
padding: 1em;
}
.float {
/* Add styles here */
}
.below {
/* Add styles here */
}
Dies ist der Anfangszustand der Aufgabe:
Klicken Sie hier, um die Lösung anzuzeigen
Sie müssen das Element nach links fließen lassen und dann clear: left zur Klasse des zweiten Absatzes hinzufügen:
.float {
float: left;
}
.below {
clear: left;
}
Aufgabe 3
In dieser Aufgabe haben wir ein schwebendes Element. Die Box, die den Float und den Text umschließt, wird hinter dem Float angezeigt.
Um die Aufgabe abzuschließen, verwenden Sie die modernste verfügbare Methode, um den Box-Hintergrund so zu erweitern, dass er unter den Float reicht, wie in dieser fertigen Darstellung gezeigt:
<div class="box">
<div class="float">Float</div>
<p>This sentence appears next to the float.</p>
</div>
body {
font: 1.2em / 1.5 sans-serif;
}
* {
box-sizing: border-box;
}
.box {
padding: 0.5em;
}
.float {
margin: 15px;
width: 150px;
height: 150px;
border-radius: 5px;
background-color: rgb(207 232 220);
padding: 1em;
color: white;
}
.box {
background-color: rebeccapurple;
padding: 10px;
color: white;
}
.float {
float: right;
}
.box {
/* Add styles here */
}
Dies ist der Anfangszustand der Aufgabe:
Klicken Sie hier, um die Lösung anzuzeigen
Bereinigen Sie die Box unter dem schwebenden Element, indem Sie display: flow-root zur Klasse für .box hinzufügen.
Andere Methoden könnten die Verwendung von overflow oder ein clearfix-Hack sein, jedoch beschreiben die Lernmaterialien die flow-root-Methode als die moderne Art, dies zu erreichen.
.box {
display: flow-root;
}