Properti float dan Beberapa Blok di CSS
Sekarang anggap ada bukan satu
div-turunan dalam kode HTML, melainkan dua dan keduanya diberikan float
dengan nilai left. Mari kita lihat
apa yang terjadi:
<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-turunan berbaris sejajar, dan blok yang pertama dalam kode HTML akan ditempatkan di sebelah kiri.
Sekarang mari ganti nilai left
dengan nilai right. Dalam hal ini
blok-blok akan mengapung ke kanan, dan urutan
mereka akan berubah menjadi kebalikan dari
urutan dalam kode 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;
}
:
