• 21-01-2016, 18:16:53
    #1
    Gold üye
    Demo :http://www.uckan.net/ Şuanda kayma sorunu yok ama resimdeki gibi olduğunda kaymalar ve boşluk oluşuyor bazı tasarımları incelediğimde qjuery ile kutuların yüksekliğine göre height verildiğini gördüm ama onu nasıl yapacağıma dair bir kod bulamadım ve üretemedim yardımcı olabilecek varsa çok makbule geçer.. css ile standart height verme işime görmüyor

  • 21-01-2016, 22:30:30
    #2
    @uckan; canlı örnek görmeden yorumlama yapmak zor ama problem jqueryden ziyade cssden gibi duruyor. Bu tarz kutularda float değeri olduğu için kutularda yükseklikler farklı olduğu zaman kayma yaparlar. Çözüm olarak; her içeriği temsil eden en dıştaki div'e yani her bir kutuya sabit height değeri verip açıklama kısmında karakter sınırlaması getirerek tüm kutuların aynı boyutta olmasını sağlamalısınız.
  • 21-01-2016, 22:35:57
    #3
    Gold üye
    yasarkemaldag adlı üyeden alıntı: mesajı görüntüle
    @uckan; canlı örnek görmeden yorumlama yapmak zor ama problem jqueryden ziyade cssden gibi duruyor. Bu tarz kutularda float değeri olduğu için kutularda yükseklikler farklı olduğu zaman kayma yaparlar. Çözüm olarak; her içeriği temsil eden en dıştaki div'e yani her bir kutuya sabit height değeri verip açıklama kısmında karakter sınırlaması getirerek tüm kutuların aynı boyutta olmasını sağlamalısınız.
    hocam yazdığım gibi zaten sorunu jqueyr ile çözmek istiyorum css ile dediğiniz gibi bir çözüm olabilir ama işimi görmüyor.
    sabit height yerine her kutu için jquery ile kendi yükseliğini atamak istiyorum bunu nasıl yapabilirim
  • 21-01-2016, 22:51:20
    #4
    uckan adlı üyeden alıntı: mesajı görüntüle
    hocam yazdığım gibi zaten sorunu jqueyr ile çözmek istiyorum css ile dediğiniz gibi bir çözüm olabilir ama işimi görmüyor.
    sabit height yerine her kutu için jquery ile kendi yükseliğini atamak istiyorum bunu nasıl yapabilirim
    siz css üzerinden sabit bir yükseklik tanımlamazsanız zaten her kutu içeriği boyunca otomatik height alacaktır, ama yapmak istediğiniz farklı birşeyse aşağıda jquery ile yükseklik çeken 4 adet fonksiyon işinize yarayabilir.

    .height() - padding border margin hariç yüksekliği getirir.

    .innerHeight() - padding dahil, border ve margin hariç yükseklik

    .outerHeight() -margin hariç yükseklik

    .outerHeight(true) - margin dahil toplam yükseklik

    Örneğin:
    var kutu_height = $('.kutu').height();

    diyerek kutu yüksekliğini alabilir

    $('.element').css('height', kutu_height);

    koduylada istediğiniz elemente yükseklik atayabilirsiniz.

    Ama amacınız kaymayı engellemek ise bu çözümünde kaymayı engelleyeceğini sanmıyorum.

    Sabit yükseklik işinizi görmüyorsa kutuları listeleyen döngünüzün html yapısını şu şekilde değiştirerek bir çözüm üretebilirsiniz.

    <div class="kutu_row">
      <div class="kutu"></div>
      <div class="kutu"></div>
    
      <div class="clear"></div>
    </div>
    
    <div class="clear"></div>
    
    <div class="kutu_row">
      <div class="kutu"></div>
      <div class="kutu"></div>
      
      <div class="clear"></div>
    </div>
    Yani her satırı bir div içine alıp araya clear atarsanız kutuların biri büyük biri küçük olsa bile kayan kutu üst satırı etkilemeyecektir.
  • 21-01-2016, 23:27:19
    #5
    Gold üye
    Teşekkürler, jQuery kodu tüm kutulara ilk kutunun heightini verdiği için çözemedim ama dediğiniz gibi sanırım yalnış düşündüm hepsine ayrı height versede sorun çözülmeyecekti diye düşünüyorum.
    Sorunu float'ı iptal ederek css'e display:inline-table; vertical-align:top vererek çözdüm