html - 连续均匀地显示网格卡片元素，无空白

Question

我试图在不换行的情况下均匀连续地显示同一类别的卡片元素。

如您所见，110-02641AR 位于 110-02642AL 旁边，但空间比其余元素大。例如，128-02545R 在新行开始，而不是从下一个继续到 125-02028L。

我尝试了所有网格布局格式，例如对齐和对齐。我也尝试删除 div。

<v-layout v-for="(parentKey,j) in filteredGroupedParts" :key="j">
    <div>
        <v-subheader class="partCatSub" row style="padding-top:15px">
            {{parentKey.group}}
            <a :name="parentKey.group"></a>
        </v-subheader>
        <v-container fluid grid-list-sm>
            <v-layout row wrap>
                <div v-for="(key,i) in parentKey.partGroups" :key="i">
                    <v-layout row wrap>
                        <v-flex shrink v-for="(key1,i1) in key.parts" :key="i1">
                            <v-card :class="[isActive?'selectedpart':'card']" @click="isActive=!isActive">
                                <v-card-title primary class="title" style="padding-bottom:0px">
                                    {{key1.interchangeNo}}
                                    <v-spacer></v-spacer>
                                    Qty. {{key1.quantity}}
                                </v-card-title>
                                <v-card-title style="padding-top:7px;height:86px">{{key1.description}}</v-card-title>
                                <v-card-title style="padding-bottom: 0px;padding-top:0px;font-weight: bold">
                                    {{key1.soldLastThirtyDays}} (${{key1.avgPriceLastThirtyDays}}) |
                                    {{key1.soldLastSixtyDays}} (${{key1.avgPriceLastSixtyDays}}) |
                                    {{key1.soldLastNinetyDays}} (${{key1.avgPriceLastNinetyDays}})
                                    <v-spacer></v-spacer>
                                    Lookups: {{key1.partActivityLastYear}}
                                </v-card-title>
                            </v-card>
                        </v-flex>
                    </v-layout>
                </div>
            </v-layout>
        </v-container>
    </div>
</v-layout>

Answer 1

已修复!为了在内部使用 v-for 渲染 2 个 div，您必须用模板替换第一个 div，它才能工作。