css - 为什么这些边界重叠？

Question

使用 CSS，这些边框在底部重叠。我正在使用大纲属性。我在网格中显示图像，但想要带有边框的网格。我不会提前知道格子里有多少item，可能有1，可能有2、3、14等。

See the overlap

这是我的 CSS

.products {display:-webkit-box;display:-ms-flexbox;display:flex;flex-wrap:wrap;width:100%;margin-top:75px;}

.product {outline: 1px solid rgba(0,0,0,.1);width:33.33%;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;-webkit-box-orient:vertical;-webkit-box-direction:normal;flex-direction:column;}

.product img {image-rendering:crisp-edges;-webkit-image-rendering:crisp-edges;}

.product a::after {text-transform:none;content:attr(data-productname);font-size:16px;color:#000;margin:10px 0;opacity:.5;pointer-events:none;text-align:center;display:block;}

HTML(在 Laravel Blade 中使用):

    <div class="products">
@foreach ($product_items as $product)
<div class="product all {{$product->menu_id}}"><a href="{{url('product') . '/' . $product->id}}" data-productname="{{$product->name}}"><img src="{{url($product->file_name)}}"></a></div>
@endforeach

输出如下所示: Output

但我不知道如何摆脱那些讨厌的重叠轮廓。我做错了什么？

Answer 1

你不能让轮廓属性只影响一侧，因此重叠。

我建议使用 border 或 box-shadow 属性。使用边框，我们可以将 box-sizing 设置为 border-box 并确保边框位于 div 内。

.product {
    width: 33.33%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    border: 1px solid rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
    border-left-width: 0;
    border-bottom-width: 0;
}

接下来，我们需要为每一行的第一个元素添加左边框。为此，您需要将每组 3 个元素包装在一个 div 中，您可以使用 PHP 轻松完成此操作。

.groupe-of-3-products .product:first-child {
    border-left-width: 1px;
}

最后，我们需要为最后一行添加底部边框。

.groupe-of-3-products:last-child .product {
    border-bottom-width: 1px;
}

这是一个live example .