Bu dersimizde jquery ile yükseklikleri dinamik olarak değişen alanların 2 grup halinde dizeceğiz.Aşağıda örnek bittiğinde daha iyi anlayacaksınız.Kodlara geçelim.
<!DOCTYPE html>
<html lang="en">
<head>
<title>UstaDerslik</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function(){
$(".kutu").each(function(){//Tüm kutularımızı döngüye aldık.
var icerik=$(this).text();//Sırası gelen kutunun içeriğini aldık.
var sol=$(".sol").height();//sol bölümün uzunluğunu aldık.
var sag=$(".sag").height();//sağın uzunluğunu aldık
var fark=sol-sag;//bir birinden çıkarttık.
if(fark>100){//fark 100 den büyüke sol büyütür yani sağ küçük.o yüzden saga içeriği koy.öbürtürlü ise sola koy dedik.
$(".sag").append('<div class="kutu">'+icerik+'</div>');
}else{
$(".sol").append('<div class="kutu">'+icerik+'</div>');
}
});
});
</script>
<style type="text/css">
.kutu{width:200px;background:#f1f1f1;margin:auto;margin-bottom:10px;padding:5px;}
.ana{width:440px;margin:auto;padding:10px;border:1px solid #ddd;}
.sol{width:220px;float:left;}
.sag{width:220px;float:left;}
.temiz{clear:both;}
#gizli{display:none;}
</style>
</head>
<body>
<div class="ana">
<div class="sol"></div>
<div class="sag"></div>
<div class="temiz"></div>
</div>
<div class="kutu" id="gizli">
1-Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec quis condimentum elit, egestas porttitor justo. Donec egestas ultricies rutrum. Aenean feugiat, odio eu pellentesque condimentum, nunc magna posuere lacus, ac fermentum turpis dui in felis. Ut non lectus eu quam eleifend mollis. Donec molestie facilisis enim quis tincidunt. Suspendisse porttitor rhoncus suscipit. Ut diam eros, volutpat et faucibus ut, faucibus eget risus. Donec feugiat, tortor eu iaculis mattis, nibh libero vestibulum lectus, sit amet posuere tellus augue ac eros. In id imperdiet nisl. Nunc ac accumsan leo, ac sagittis lorem.
</div>
<div class="kutu" id="gizli">
2-Maecenas pharetra, massa id consequat accumsan, sem justo aliquet arcu, non tempus augue lorem id est. Sed ultricies turpis a commodo rhoncus. Nam tempor massa sed lacus vulputate cursus. Vestibulum sed scelerisque arcu, ut elementum erat. Donec ultricies nulla non convallis tincidunt. Donec sit amet quam mauris. Praesent vitae nibh nec erat elementum tempus. Nunc consectetur ultricies sodales. Proin vitae neque et quam molestie aliquam eu tristique justo. Cras vel feugiat justo. Ut tempor lacinia placerat. Etiam vitae leo sed orci laoreet venenatis et accumsan ligula. Fusce sed cursus libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porttitor leo in arcu venenatis, non pretium elit faucibus. Mauris ac porttitor nisl. Nunc facilisis aliquet elit, et posuere lorem vestibulum quis. Sed adipiscing justo sed bibendum feugiat. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Duis non libero tincidunt, scelerisque neque id, aliquet dui. Vestibulum interdum sollicitudin tortor, sit amet commodo metus porttitor a. Ut id enim mollis, tristique urna in, sodales lectus. Donec sem nulla, tempus non lobortis eu, eleifend non neque. Maecenas egestas metus non elit mollis vulputate. Nunc non pulvinar metus. Integer fringilla tempor tortor, nec egestas augue dapibus accumsan.
</div>
<div class="kutu" id="gizli">
3-Cras commodo est non scelerisque condimentum. Maecenas ut blandit dolor, sit amet commodo augue. Nulla pharetra facilisis lacinia. Pellentesque at tincidunt massa, id cursus nibh. Mauris ultricies, leo nec commodo imperdiet, libero tellus imperdiet nibh, sed cursus erat elit vel dui. Morbi adipiscing tempor ligula et eleifend. Etiam mattis, quam eget pulvinar ultricies, nisl diam semper neque, id mattis augue augue eu risus. Etiam tempus auctor mattis.
</div>
<div class="kutu" id="gizli">
4-Cras non metus in orci fringilla volutpat. Nam nunc massa, condimentum vel lobortis sed, varius eget risus. Phasellus ut augue id lorem pretium vehicula ut sed purus. Fusce non porta mauris.
</div>
</body>
</html>
Görüntüsü :
Gördüğünüz gibi sağda sadece 2 var.Sebebi uzunluğu çok olduğu için olu oraya attık diğerlerini sola attık bu yüzden boyutları eşit oldu.
UstaDerslik
