0

我正在使用这个网站： http: //genesis.ecoverbuddy.com/

我将砌体用于电子商务产品类别的响应功能。现在，我需要使第二行浮动在中心。

问：实现它的最佳方法是什么？ 如果在较小的屏幕尺寸中保持响应功能，那就太好了。

这是我的jQuery代码：

jQuery(window).on('load', function(){ 
var $ = jQuery;
/*  Masonry */
var $container = $('.woo-cat ul.products');
// initialize
    $container.masonry({
          columnWidth:10, 
          itemSelector: '.product-category', 
          isAnimated: true,
          isFitWidth: true
    });
$container.masonry('reloadItems'); 
});
4

1 回答 1

2

最好的实现方式？根本不要使用砖石 - 只需使用 CSS。你很幸运，因为你所有的图像都是 300x300。砌体通常用于将各种尺寸的物品最好地排列成网格，并且传统上浮动将它们笨拙地排列。

响应式和居中的一个简单示例如下：

http://jsfiddle.net/aF7tP/

* { margin:0; padding:0; }
ul { list-style: none; text-align: center; font-size: 0;}
li { display: inline-block; font-size: 24px; position: relative; padding: 8px;}
img { display: block; margin: 0 auto; }
span { position: absolute; bottom:8px; left:8px; right:8px; padding: 8px; background: rgba(0,0,0,0.4); color: #fff; }

您的确切 CSS 将完全由您想要的内容决定，但不要错过要点 - 不要使用 Masonry，这对您的特定要求是不必要的（并且是有害的）。

于 2013-09-18T12:28:07.067 回答