CSS Cok Kullanisli Clearfix Metodu
CSS ile tasarlama yapanlarin veya yapacak olanlarin basina gelebilecek sikici bir durumdan bahsedecegim. Bu sorun bir elemanin (div) icine baska bir eleman (div) eklendiginde disarida kalan elemanin uzunlugunun ictekine gore oynamamasi.

Bu sorunu ilk yasadigimda cozmek icin cok arastirdim, hatta moralimi bozup nerdeyse vazgececetim. Bu konuda yardimi Fatih Turan'dan aldim. Kendisi bana konu ile ilgili 3 makale adresi gonderdi. Bunlardan bana gore en basit anlatimli olani sizlere aktarmaya calisicam.

Kullanabilecegimiz iki cesit temizleme yontemi var;

1- {clear: both;}
2- clearfix

Clearfix Metodu icin kodlarimiz:
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}

.clearfix {
display: inline-block;
}

html[xmlns] .clearfix {
display: block;
}

* html .clearfix {
height: 1%;
}


Kullanimi Gayet Basit:
Bu tarz bir yapi kullanacaginiz zaman dis elemanin sinifina "clearfix" ekliyoruz.
<div class="DisCerceve clearfix"> 
<div class="Kutu1"></div>
<div class="Kutu2"></div>
</div>


ornek dosyayi gormek icin tiklayiniz.
December 26, 2008
Ayberk Atasay
CSS
2 yorum