CSS Ders-10 Ard Arda Eleman Sıralama (float-clear)
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

CSS Ders-10 Ard Arda Eleman Sıralama (float-clear)

profil
cArleone
BEĞEN(1)
BEĞENME(0)
GÖRÜNTÜLENME(3026)
RAPOR ET
Bu derste float kodunu görecez.İşlevinden başlayalım.Block elementleri yan yana sıralamak için kullanırız.Bildiğiniz gibi block elemnetlere width de versek gidebildikleri kadar gider.İşte burda float ile ard arda sıralıyoruz.Bu float olayında dikkat etmemiz gereken float verdiğimiz elemanın hemen ardından clear kullanmalıyız.Yoksa diğer elemanları bozar.

Float 2 değer alır.
1- left = sol
2- right =sağ sıralamak için

Bir örnek yapalım.
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.kutu{width:100px;height:100px;background:green;float:left;margin-left:5px;}
.temiz{clear:both;}
</style>
</head>
<body>

<div class="kutu">1</div>
<div class="kutu">2</div>
<div class="kutu">3</div>
<div class="kutu">4</div>
<div class="kutu">5</div>
<div class="temiz"></div>

</body>
</html>


Görüntüsü :
http://ustaderslik.com/resim/ders/rhdy5.bmp

Burda ne yaptık.5 tane kutu clası olan div yaptık.Normalde float vermesek alt alta olacaktık ama biz floatla sola ard arda sırala dedik.Daha boş olsun diye hepsi soldan 5 px dış boşluk bıraksın dedim.

Kutuların el altına temiz clası olan div yaptım.Niye çünkü diğer kullanacağımız objelere artık float bitti demek için.

.temiz{clear:both;}

Bu hem sağ temizleme hem sol temizleme yapar.
Tek taraflı temizleme için left yada right verebilirsiniz.




davmaneydi
davmaneydi 3 Yıl Önce Cevaplandı
clear both eklemezsek ne olur hocam?
cArleone
cArleone 3 Yıl Önce Cevaplandı
tasarım bir birine girer.



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol