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%;
}
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>
<div class="Kutu1"></div>
<div class="Kutu2"></div>
</div>
ornek dosyayi gormek icin tiklayiniz.
- personAyberk Atasay
- calendar_monthDecember 26, 2008
- categoryCSS
- sharepaylaş
