Testen Sie Ihre Fähigkeiten: Floats
Ziel dieses Fähigkeitstests ist es, Ihnen zu helfen, zu beurteilen, ob Sie Floats in CSS mit den Properties und Werten von float und clear sowie anderen Methoden zum Aufheben von Floats verstehen. Sie werden drei kleine Aufgaben durchgehen, die verschiedene Elemente des Materials verwenden, das Sie gerade durchgearbeitet haben.
Hinweis: Um Hilfe zu erhalten, lesen Sie unseren Testen Sie Ihre Fähigkeiten Leitfaden. Sie können uns auch über einen unserer Kommunikationskanäle kontaktieren.
Aufgabe 1
Um diese Aufgabe abzuschließen, lassen 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 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 */
}
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 abzuschließen:
- Lassen Sie das Element mit einer Klasse von
floatlinks floaten. - 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 das Bild unten 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 */
}
Klicken Sie hier, um die Lösung anzuzeigen
Sie müssen das Element links floaten und dann clear: left zur Klasse für den zweiten Absatz hinzufügen:
.float {
float: left;
}
.below {
clear: left;
}
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.
Um die Aufgabe abzuschließen, verwenden Sie die aktuellste verfügbare Methode, um den Hintergrund des Kastens dazu zu bringen, sich bis unter den Float zu erstrecken, wie im Bild unten:
<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 */
}
Klicken Sie hier, um die Lösung anzuzeigen
Heben Sie den Kasten unterhalb des gefloateten Elements auf, indem Sie display: flow-root zur Klasse für .box hinzufügen.
Andere Methoden könnten overflow oder ein clearfix-Hack sein, allerdings beschreiben die Lernmaterialien die flow-root Methode als die moderne Art, dies zu erreichen.
.box {
display: flow-root;
}