0

我目前正在使用运行循环并将多个容器显示为列表（数千个结果）的 Angular 5。

<div class="temp-list">
      <div>
            <ng-container #activityCards *ngFor="let activity of (activityCollection.activities | filters: filtersObject); let i = index;">
                <div class="activity-card-container" *ngIf="checkIsVisible(i)" [ngClass.gt-md]="{'display-inline': true, 'large-activity': i < 3, 'medium-activity': i > 2 && i < 7, 'small-activity': i > 6 }" >
                    <activity-card [activity]="activity"></activity-card>
                </div>
            </ng-container>
      </div>
</div>

您还可以看到我正在使用一个 Flex Layout ngClass，它根据元素的索引向容器添加一个类。前三个容器是大型的（33.33%），接下来的 4 个是中型的（25%），其余的都是小型的（20%）。但是，我希望每个元素之间有 24px 的空间；我只想要容器之间的空间，而不是左端或右端。

在此处输入图像描述

这是我目前拥有的 CSS。

.temp-list {
    font-size: 0;
}
.activity-card-container {
    position: relative;
    box-sizing: border-box;
}
.display-inline {
    display: inline-block;
    padding: 0 24px 24px 0;
}
.large-activity {
    width: 33.333%;
}
.large-activity:nth-child(3) {
    padding-right: 0;
}
.medium-activity {
    width: 25%;
}
.medium-activity:nth-child(7) {
    padding-right: 0;
}
.small-activity {
    width: 20%;
}
.small-activity:nth-child(5n + 12) {
    padding-right: 0;
}

如您所见，我在每个容器的右侧和底部添加了 24px 的填充。然后我选择每行的最后一个元素并忽略填充。这个解决方案的问题是最后一个元素总是比之前的容器宽 24px。我需要它们都具有相同的宽度。有什么想法吗？

4

1 回答 1

1

不要使用填充在项目之间创建空间，而是使用 Flexbox 和space-between，然后使用 CSS Calc 从项目的宽度中减去所需的空间。

假定的主容器应该是.activity-card-container的父容器。

堆栈片段

    .temp-list {
        font-size: 0;
    }
    .temp-list > div {                   /* assumed the main parent container  */
        font-size: 0;
        border: 1px solid red;           /* for this demo  */

        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .activity-card-container {
        position: relative;
        box-sizing: border-box;
        background: lightgray;           /* for this demo  */
        height: 70px;                    /* for this demo  */
    }
    .large-activity {
        width: calc(33.333% - 16px);     /* 2 gaps * 24px = 48px / 3 items = 16px */
    }
    .medium-activity {
        margin-top: 24px;
        width: calc(25% - 18px);         /* 3 gaps * 24px = 72px / 4 items = 18px */
    }
    .small-activity {
        margin-top: 24px;
        width: calc(20% - 19.6px);       /* 4 gaps * 24px = 98px / 5 items = 19.6px */
    }
<div class="temp-list">
  <div>
    <div class="activity-card-container large-activity">
      activity-card
    </div>
    <div class="activity-card-container large-activity">
      activity-card
    </div>
    <div class="activity-card-container large-activity">
      activity-card
    </div>

    <div class="activity-card-container medium-activity">
      activity-card
    </div>
    <div class="activity-card-container medium-activity">
      activity-card
    </div>
    <div class="activity-card-container medium-activity">
      activity-card
    </div>
    <div class="activity-card-container medium-activity">
      activity-card
    </div>
    
    <div class="activity-card-container small-activity">
      activity-card
    </div>
    <div class="activity-card-container small-activity">
      activity-card
    </div>
    <div class="activity-card-container small-activity">
      activity-card
    </div>
    <div class="activity-card-container small-activity">
      activity-card
    </div>
    <div class="activity-card-container small-activity">
      activity-card
    </div>
</div>
</div>

于 2017-11-28T19:38:18.963 回答