Yüzen DIV'ler arasındaki dikey boşluğu kaldır

Question

Farklı boyutlardaki DIV'lerim arasındaki dikey boşluğu kaldırmak için biri bana doğru yönde işaret edebilir mi? Hepsi aynı yükseklikte olduklarında işe yaramazlar, ama hepsi de boyları değişecek ve ben de havalı görünmelerini istiyorum.

I (3 sütun gibi) birbirlerine altında yuva kadar hepsini istiyorum.

HTML:

<div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi. Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 

CSS:

.productDivs { 
    max-width: 290px; 
    min-height: 50px; 
    margin-bottom: 25px; 
    margin-right: 18px; 
    padding: 5px; 
    border: 1px solid #e0e1dd; 
    float: left; 
    display: block; 
} 

İşte ben bugüne kadar ne bir fiddle bu.

Lütfen nazik ol, hala CSS :)

Answer 1

Duvar ve imagesLoaded kütüphane ilk imagesLoaded kütüphane ve ardından duvarcılık çağrılması

http://masonry.desandro.com/

http://imagesloaded.desandro.com/

kombine gösterge iyi olmalıdır.İşte

**HTML** 
<div class="productDivsWrapper"> 
    <div id="" class="productDivs"> 
     <img src="http://placehold.it/290x162"> 
     <h2>This is the DIV title</h2> 
     <p>Fusce egestas elit eget lorem. Phasellus ullamcorper ipsum rutrum nunc. Praesent ac massa at ligula laoreet iaculis. Vivamus elementum semper nisi.</p> 
    </div> 
    ... 
</div> 

**JS** 
$('.productDivsWrapper').imagesLoaded(function() { 
    $(".productDivsWrapper").masonry(
     { 
      itemSelector:'.productDivs', 
     } 
    ); 
}); 

bir jsfiddle: Eğer az yararlı karşılamak zorunda değilseniz https://jsfiddle.net/1hc31mth/1/

Answer 2

Bu kolay bir cevap gitmiyor öğreniyorum. Kayan nokta: sol, üstündeki satırın sağ tarafındaki en yüksek kutunun alt kenarının altına sarılmasına neden olur. Yani bu dikey oluklarla sonuçlanırsınız. http://www.eonline.com'da çalıştığımda, ana sayfada aynı sorun vardı.

Arkadaşım Lou, bu site için Sıvı Sabitleme motorunu çağırdı. Takıldığı zaman onu tamir etmede yardımcı oldum. Bu betikte, div'leri nasıl yukarı taşıyacağınıza ilişkin bazı yanıtlar için kazmak isteyebilirsiniz: http://www.eonline.com/resources/js/liquid_pinning/liquid_pinning.js

Sabit piksel yükseklikleri kullanarak tamamen konumlandırıldıklarına inanıyorum. Her bir sütunun toplam yüksekliğini & sütunları gereken şekilde ayarlayan diziler vardır. Komut, &'un nereye yerleştirileceğini, dikey boşluk alanına yerleştirdiğini bulur, böylece dikey boşluklar oluşturulmaz.

http://www.pinterest.com web sitesinden modellediğimiz oldukça güzel bir eserdi. Görünüşe göre, div'ler aynı etkiyi gerçekleştirmeye çalışıyor.

Not: Bu komut, bir kullanıcı bu ana sayfada özünürlüklerini ayarladıklarında, 3 sütun genişliğinde 4 sütun genişliğinde 5 sütun genişliğinde görünüm & oluşmasını sağlamak için oluşturuldu. Ayrıca, gerektiğinde üst kısımdaki & sol üst köşeye sabit widget'ları sabitler. Bu efekti görmek için & modelini yakınlaştırmayı deneyin. Ben kullanmayı öneriyoruz

Answer 3

Bu sorunun çözümü (CSS, hiçbir dikey boşluk, duvarcılık düzeni) https://stackoverflow.com/a/25668648/871781