Float omadus ja mitu plokki CSS-is
Olgu nüüd HTML koodis kõrvuti mitte üks
div-tuletis, vaid kaks ja mõlemale on määratud float
väärtusega left. Vaatame,
mis juhtub:
<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;
}
:
Niisiis, nagu näeme, asusid kaks ploki-tuletist ritta, kusjuures esimene HTML koodis olev plokk asub vasakul.
Proovime nüüd väärtuse left asemel
kasutada väärtust right. Sel juhul
plokid hõljuvad paremal, kusjuures nende järjekord
muutub vastupidiseks võrreldes
HTML koodis oleva järjekorraga:
<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;
}
:
