CSS Float
Buat html sederhana seperti dibawah.
<body>
<div class="pertama"></div>
<div class="kedua"></div>
<div class="ketiga"></div>
</body>
Lalu beri style untuk representasikan float
div{
width: 100px;
height: 100px;
}
.pertama{
background-color: red;
float: left;
margin-left: 20px;
}
.kedua{
background-color: green;
}
.ketiga{
background-color: blue;
}
Pada gambar dibawah bisa dilihat bahwa box hjau naik keatas dan box merah mengapung/menimpa diatas box hijau
<body>
<div class="container">
<div class="pertama"></div>
<div class="kedua"></div>
<div class="ketiga"></div>
</div>
</body>
Lalu buat style untuk representasikan float yang menggunakan parent container
.container{
width: 500px;
border: 5px solid black;
}
.pertama, .kedua, .ketiga{
width: 100px;
height: 100px;
margin: 10px;
}
.pertama{
background-color: red;
float: right;
}
.kedua{
background-color: green;
}
.ketiga{
background-color: blue;
}
Karna box merah mengapung jadi bisa digeser kekanan tetapi tidak melewati parentnya.
- Teks Wrapping
Masukan gambar dan teks random
<body>
<div class="container">
<img src="csslogo.png" alt="logo">
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Eligendi obcaecati assumenda accusantium
ullam quo nobis aliquid rem nostrum quae magni nam odit, voluptate saepe sunt veniam omnis distinctio vel,
quisqua quaerat dolor neque nihil cumque eaque. Libero nostrum corrupti tempore voluptatum sit accusantium,
quos ipsam ut explicabo illo deleniti? Aliquam incidunt unde non, esse neque nemo soluta debitis
excepturi consectetur voluptas eius aspernatur totam voluptate in tempora fugiatperferendis recusanda
quibusdam eum inventore! Quisquam odio delectus possimus necessitatibus dolores saepe doloribus repud
iandae maiores labore accusamus, magni temporibus. Enim libero quis
quam facere dolorem, odit dolores laboriosam hic, amet quis cupi
ditate dicta?</p>
</div>
Beri style pada parent dan img. Witdh ditambahkan jika diperlukan karna ukurannya terlalu besar.
.container{
width: 500px;
border: 5px solid black;
}
img{
width: 140px;
float: left;
margin: 20px;
}
Float disini bertujuan untuk membuat agar teks berada disamping gambar.
- Image Gallery
<body>
<div class="container">
<div class="box1">1</div>
<div class="box">2</div>
<div class="box">3</div>
<div class="box">4</div>
<div class="box">5</div>
<div class="box2">6</div>
</div>
Lalu style seperti dibawah untuk representasikan stylenya
.container{
width: 500px;
border: 5px solid black;
margin: auto;
padding: 5px;
}
.box{
width: 100px;
height: 100px;
float: left;
background-color: red;
margin: 10px;
text-align: center;
line-height: 100px;
}
.box1{
background-color: blue;
width: 100px;
height: 100px;
margin: 10px;
float: right;
text-align: center;
line-height: 100px;
}
.box2{
background-color: green;
width: 100px;
height: 100px;
margin: 10px;
float: right;
text-align: center;
line-height: 100px;
}
Telihat bahwa warna biru dan hijau berada pad float yang sama tetapi tidak dengan yang lainnya. Dan lihat juga bahwa container yang harusnya mengelilingi box tidak berfungsi sama sekali, maka balik lagi fungsi dari float adalah mengapung maka semua box berada di atas container, jika kalian ingin tetap berada pada container maka gunakan Display Flex tetapi float disini jadi sudah tidak berfungsi.
- Multi-Column Layout
Buat html seperti dibawah
<body>
<div class="container">
<div class="kiri"></div>
<div class="tengah"></div>
<div class="kanan"></div>
</div>
</body>
Beri style seperti dibawah
.container{
width: 600px;
border: 3px solid black;
margin: auto;
padding: 10px;
}
.kiri {
width: 250px;
height: 250px;
background-color: red;
float: left;
}
.tengah {
width: 100px;
height: 250px;
background-color: yellow;
float: left;
}
.kanan {
width: 250px;
height: 250px;
background-color: green;
float: left;
}
Ini tampilan yang akan dihasilkan.
Komentar
Posting Komentar