Sifat float dan beberapa blok dalam CSS
Sekarang andaikan terdapat bukan satu
div-anak dalam kod HTML, tetapi dua, dan kedua-duanya mempunyai float
dengan nilai left. Mari kita lihat
apa yang akan berlaku:
<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;
}
:
Jadi, seperti yang kita lihat, dua blok-anak tersusun sebaris, dengan blok pertama dalam kod HTML akan terletak di sebelah kiri.
Sekarang mari kita tukar nilai left
kepada nilai right. Dalam kes ini,
blok-blok akan terapung di sebelah kanan, dan susunan
mereka akan terbalik berbanding dengan
susunan dalam kod HTML:
<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;
}
:
