如何在计算图像宽度时引入边距？

问题描述

以下代码生成砌体布局：

<ngx-masonry  class="masonry" [options]="myOptions">
  <div ngxMasonryItem class="masonryItem" *ngFor="let post of posts;index as idx" (click)="showPostDetail(post)" >
    <div class="crop">{{post.description}}</div>
    <img [src]="imgConstructor(post.img)">
  </div>
</ngx-masonry>

现在使用CSS代码：

.masonryItem {
    padding: 7px;
    margin-top: 5px;
    background-color: darkgoldenrod;
    border: 0.4px solid black;
    width: 20%;
}

.masonryItem img {
    object-fit: cover;
    max-width: 100%;
    min-width: 100%;
} 

由于每一项的宽度为20％，因此连续显示五张图像。但是现在我想在 masonryItem 类

中的CSS代码中包含保证金属性

.masonryItem {
   margin: 1rem
}

但是这样一来，连续只有4张图像，而砖石网格的右侧将有一些空间。那么如何在宽度计算中引入边距属性，以使每行显示五个图像？

我的解决方案：

使用1rem添加边框属性：

.masonryItem{
  border: 1rem solid white;
}

如果背景颜色和边框颜色相同，则看起来像边距1rem。那么每行的图像数量是相同的。

解决方法

如果您正在使用该库：https://github.com/wynfred/ngx-masonry，则有一个gutter属性应允许更改项目之间的距离。

,

对于这种显示，您可能应该在元素之间的间隔中使用带有“ gap”属性的“ display：flex”。