0

以下代码生成砌体布局：

<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。那么每行的图像数量是相同的。

4

2 回答 2

1

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

于 2020-10-05T09:09:20.907 回答
1

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

于 2020-10-05T09:00:31.397 回答