Question

使用具有产品网格布局的网上商店。

网格默认为5个项目，4个向下：20个项目。

使用CSS，项目<li>可以合理地将它们分开。但是，如果小于5的倍数，则间距会偏斜，因为对齐的间距在该行上的空间少于5个项目，因此会增加更多的空白。 参见： http://jsfiddle.net/DmgeF/1/

现在，我知道有多少产品使用$count_page = $wp_query->post_count每页监听。我最多可以列出每页200个项目。

我的想法是在最后一行添加虚拟<li>元素，如果它需要1,2,3或4个额外<li>来平衡间距。

我试过了：

// GET MULTIPLES OF 5
$array_main = array_fill(1, 40, null);
array_walk($array_main, function(&$item, $key){ $item = $key * 5; });

// GET $array_main MINUS OTHERS
$minus_1 = $minus_2 = $minus_3 = $minus_4 = array();
foreach($array_main as $key => $value) {
    $minus_1[$key] = $value - 1 ;
    $minus_2[$key] = $value - 2 ;
    $minus_3[$key] = $value - 3 ;
    $minus_4[$key] = $value - 4 ;
}

这会导致项目数量减去缺少<li>的 n 值。

我一直在努力弄清楚的是如何计算我需要的遗失<li>的数量。

类似的东西：

if($count_page IS A VALUE OF $minus_1) { echo '<li></li>'; }
if($count_page IS A VALUE OF $minus_2) { echo '<li></li><li></li>'; }
if($count_page IS A VALUE OF $minus_3) { echo '<li></li><li></li><li></li>'; }
if($count_page IS A VALUE OF $minus_4) { echo '<li></li><li></li><li></li><li></li>'; }

Answer 1

您需要添加5 - $count_page % 5虚拟列表项以使列表项的总数达到5的倍数，除非$count_page % 5 == 0，否则您不必添加任何虚拟列表项

添加虚拟元素以填充X个空格

1 个答案: