Question

使用CSS，这些边框在底部重叠。我正在使用outline属性。我正在网格中显示图像，但希望网格带有边框。我不会提前知道网格中有多少个项目，可能有1个，可能有2个，3个，14个，等等。

这是我的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

您不能使outline属性仅影响一侧，因此不能重叠。

我建议使用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。

为什么这些边界重叠？

1 个答案: