浮動元素 - 網格中的問題

Question

我正在建立一個網上商店，其中包含網格中的產品概述。這是連續三個產品，在產品圖像下面有一個描述（或標題）。當它們都具有相同的高度時，一切都很完美。例如，當某行中的某個產品的標題較長並以不同的高度結束時，下一行的第一個產品會移動到屏幕的右側，剩下兩個空白位置。產品然後繼續在下一行。這怎麼可以避免？

I've made a little demo to demonstrate my problem: 

http://jsfiddle.net/ppDp3/

Answer 1

與isotope固定它。我首先讓ImagesLoaded插件檢查是否加載了所有的圖像，然後我關閉同位素插件。代碼如下所示。

// Generated by CoffeeScript 1.7.1 
var product, products; 

if ($('.products').length > 0) { 
    products = $('.products'); 
    product = $('.product'); 
    products.imagesLoaded(function() { 
    return products.isotope({ 
     itemSelector: '.product', 
     layoutMode: 'fitRows' 
    }); 
    }); 
}