Egenskapen float og flere blokker i CSS
La det nå være ikke én
div-barneelement i HTML-koden, men to, og begge har
float
satt til verdien left. La oss se
hva som skjer:
<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;
}
:
Så, som vi kan se, har de to blokk-barneelementene stiltt seg på rad, hvor den første blokken i HTML-koden vil være plassert til venstre.
La oss nå i stedet for verdien left
skrive verdien right. I dette tilfellet
vil blokkene flyte til høyre, hvor rekkefølgen
deres vil være motsatt sammenlignet med
rekkefølgen i HTML-koden:
<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;
}
:
