Question

当我有12个产品，或者确实是行长度的任意倍数（3）时，这个网格工作正常但是当我遗留物品时，我的边框不起作用。我正在使用适用于任意数量项目的内部网格。

如果最后一行只有一个项目，则有底部或右边框。如果有2，则项目只有右边框。

Answer 1

在你的小提琴中，你在最后3个元素上有'last3'类。我不确定你是如何生成这个的，但如果你可以生成这个，你应该能够使用模数来生成一个简单称为'lastrow'的类，它只会在最后一行中的项目上进行，而不是总是最后一行3.通过这种方式，您可以轻松地告诉它显示某些边框。我还将边框顶部更改为边框底部，这样可以保证您始终有一个边框（例如，有10个项目）

包含新课程的HTML

<section class="products">
    <article class="product-single  cf">1</article><article class="product-single  cf">2</article><article class="product-single  cf">3</article><article class="product-single  cf">4</article><article class="product-single  cf">5</article><article class="product-single  cf">6</article><article class="product-single  cf">7</article><article class="product-single  cf last3 ">8</article><article class="product-single cf">9</article><article class="product-single lastrow cf">10</article><article class="product-single lastrow cf">11</article></section>

已修改CSS

* {
 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
}
section.products {
width: 100%;        
}
section.products article.product-single  {
    width: 33.3333%;
    padding: 2%;
    display: inline-block;
    vertical-align: top;
    position: relative;
    min-height: 260px;
    border-bottom: 1px solid red;
    border-right: 1px solid red;
    position: relative;
}

section.products article.product-single:nth-child(3n) {
    border-right: none;
}

section.products article.lastrow{
    border-bottom: none;
}

Here's the fiddle.

不均匀列表的内部CSS网格边框

1 个答案: