Float-ominaisuus ja useita lohkoja CSS:ssä
Olkoon nyt HTML-koodissa vierekkäin ei yksi
div-lapsielementti, vaan kaksi ja molemmille on asetettu float
arvoksi left. Katsotaan,
mitä tapahtuu:
<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;
}
:
Kuten näemme, kaksi lohko-lapsielementtiä asettuivat riviin, ja HTML-koodissa ensimmäinen lohko on sijoitettu vasemmalle.
Kokeillaan nyt arvon left sijasta
arvoa right. Tässä tapauksessa
lohkot kelluvat oikealla, ja niiden järjestys
kääntyy päinvastaiseksi verrattuna
HTML-koodin järjestykseen:
<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;
}
:
