浮动元素 - 网格中的问题

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' 
    }); 
    }); 
}