html - 每行显示不同数量的

Question

我想让第一行有 3 个产品，第二行有 2 个产品，并且重复此模式。

这是代码

 <ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
<?php $_columnCount = $this->getColumnCount(); // value 3 ?>
       <?php $i=0;$k=1;foreach($products as $product ?>
        <li class="item <?php echo ($k==4) || ($k%10==0)? 'big ': '' ?> <?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
         <?php echo $product->getName() ?>
         <?php $k++;?>
        </li>
    <?php endoforeach; ?>
    </ul>

<style>
    .big,.big img
    {
        width: 60% !important;
        height: 278px !important;
    }

</style>

大类适用于第4、10、14、20... <li>用 2 个产品制作第二行。现在问题是第三个<li>在第二行中占据整行并向下推下一个 <li>到下一行。

屏幕截图链接 http://i59.tinypic.com/jjr4vc.jpg

这是供引用的magento和产品列表scss文件。

如有任何帮助，我们将不胜感激。

// This mixin outputs the styles to allow for grids with more than 3 columns
@mixin product-grid($column-count, $container-width, $class-append:"") {

    // Allow this mixin to be used for more specific purposes, such as grids contained within widgets
    @if $class-append != "" {
        $class-append: -#{$class-append};
    }

    /* Config: Columns + flexible gutter */
    $column-gutters: ($column-count) - 1;
    $container: $container-width - (2 * $trim);
    $column-width: ($container - ($column-gutters * $product-column-spacing)) / $column-count;

    /* Undo three-column config */
    .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(odd) {
        clear: none;
    }
    .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(3n+1) {
        clear: none;
    }
    .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(even),
    .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(3n) {
        margin-right: percentage($product-column-spacing / $container);
    }

    /* Set column config */
    .products-grid--max-#{$column-count}-col#{$class-append} > li {
        margin-right: percentage($product-column-spacing / $container);
    }
    .products-grid--max-#{$column-count}-col#{$class-append} > li {
        width: percentage($column-width / $container);
        margin-right: percentage($product-column-spacing / $container);
    }
    .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(#{$column-count}n+1) {
        clear: left;
    }
    .products-grid--max-#{$column-count}-col#{$class-append} > li:nth-child(#{$column-count}n) {
        margin-right: 0;
    }
}

Answer 1

以下脚本对我有用。

<ul class="products-grid products-grid--max-<?php echo $_columnCount; ?>-col">
<?php $i=0; $k=$_columnCount; foreach ($_productCollection as $_product): ?>
<?php 
$class="";
if($i%$k == 0){ $class='big'; }
$i++;
if($i==$k){ $i=0; $k--; }
if($k == 0) { $k=$_columnCount;$i=0; }
?>
<li class="item <?php echo $class;?><?php if(($i-1)%$_columnCount==0): ?> first<?php elseif($i%$_columnCount==0): ?> last<?php endif; ?>">
<?php echo $product->getName() ?>
</li>
<?php endoforeach; ?>
</ul>

<style>
.big    {
Clear:both;
/*width: 60% !important;
height: 278px !important;*/
}
</style>

希望对你有帮助。