Sebelum belajar tentang cara mengatur float dengan css, terlebih dahulu kita harus mengenal apa fungsi dari float.
Float berfungsi sebagai penentuan tata letak pada sebuah element,
objek dan yang lainnya yang harus di sesuaikan tata letaknya dengan
float.
Posisi pada sebuah float meliputi posisi, kiri, kanan, namun tidak untuk atas, bawah.
Berikut syntax untuk Cara mengatur float dengan css sebelah kiri :
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
|
<html>
<head>
<title>CariKode.Com</title>
<style>
body{
background-color:#bdc3c7;
}
.gambar{
width:200px;
height:150px;
margin:5px;
float:left;
}
h2{
font-family:Century;
text-align:center;
color:#16a085;
}
</style>
</head>
<body>
<h2>CariKode Galery</h2>
<img class="gambar" src="../images2/carikode1.jpg">
<img class="gambar" src="../images2/carikode2.jpg">
<img class="gambar" src="../images2/carikode3.jpg">
<img class="gambar" src="../images2/carikode4.jpg">
<img class="gambar" src="../images2/carikode5.jpg">
<img class="gambar" src="../images2/carikode6.jpg">
<img class="gambar" src="../images2/carikode7.jpg">
<img class="gambar" src="../images2/carikode8.jpg">
<img class="gambar" src="../images2/carikode9.jpg">
<img class="gambar" src="../images2/carikode10.jpg">
</body>
</html>
|
Untuk hasil Cara mengatur float dengan css sebelah kiri, bisa di lihat di bawah ini :
gambar float left
Untuk membuat letak gambar di sebelah kanan, sahabat cari kode hanya
tinggal menggati syntax css pada float menjadi seperti ini :
|
|
.gambar{
width:200px;
height:150px;
margin:5px;
float:right;
}
|
Untuk hasil Cara mengatur float dengan css sebelah kanan, bisa di lihat di bawah ini :
float kanan
Artikel keren lainnya:
Belum ada tanggapan untuk "Cara mengatur float dengan css"
Post a Comment