De eigenschap float en meerdere blokken in CSS
Stel dat er nu niet één
div-kind is in de HTML-code, maar twee, en beide hebben
float
met de waarde left. Laten we kijken
wat er gebeurt:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: left;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
Dus, zoals we kunnen zien, staan de twee kindblokken op een rij, waarbij het eerste blok in de HTML-code links wordt geplaatst.
Laten we nu in plaats van de waarde left
de waarde right schrijven. In dit geval
zullen de blokken rechts zweven, waarbij de volgorde
wordt omgekeerd vergeleken met
de volgorde in de HTML-code:
<div class="parent">
<div class="child">1</div>
<div class="child">2</div>
some long text
</div>
.parent {
border: 1px solid red;
text-align: justify;
}
.child {
float: right;
width: 200px;
height: 100px;
border: 1px solid green;
}
:
