Question

我正在使用此网站：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'); 
});

Answer 1

实施它的最佳方式？根本不要使用砖石 - 只需使用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 JS - 如何将第二行中的网格元素居中

1 个答案: