BELAJAR WEB DESAIN

CSS FLOAT

 

FLOAT

 

Memberikan perintah pada css dengan property float disertai dengan nilai(left, right) akan memberikan efek penempatan posisi yang berberda.

lihat contoh css berikut:

img
{
float:right;
}

dengan perintah diastas posis gambar  ada diletak pada bagian akan

untuk lebih jelasnya buat latihan seperti dibawah ini

 

<!DOCTYPE html>
<html>
<head>
<style>
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
</style>
</head>

<body>
<h3>Image Gallery</h3>
<p>Poto dapat anda siapkan terlebih dahulu.</p>
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
<img class="thumbnail" src="klematis_small.jpg" width="107" height="90">
<img class="thumbnail" src="klematis2_small.jpg" width="107" height="80">
<img class="thumbnail" src="klematis3_small.jpg" width="116" height="90">
<img class="thumbnail" src="klematis4_small.jpg" width="120" height="90">
</body>
</html>

 

Selamat mencoba