自动获取最大高度的CSS手写笔

简单的问题是，有时我的卡片中有更多的内容（使其更大），我希望较小的卡片自动获得较大卡片的高度

你可以在所附的图片上清楚地看到我的意思

我使用的是quasar（vuejs框架）和手写笔

下面是我的方块css代码：

<style lang="stylus" scoped>
.q-card {
    margin: 10px;
    width : auto;
    img {
        height : 150px;
    }
}
</style>

.q卡{
利润率：10px；
宽度：自动；
img{
高度：150像素；
}
}

更新 以及有关的网页：

<ais-results :stack="true" class="row">
    <template slot-scope="{ result }">
        <div class="col-md-3 col-xs-6">
            <q-card>
                <q-card-media>
                    <img :src="result.picture">
                </q-card-media>
                <q-card-title>
                    {{result.name_event}}
                    <q-rating slot="subtitle" :max="5" />
                    <div slot="right" class="row items-center">
                        <q-icon name="place" /> 250 ft
                    </div>
                </q-card-title>
                <q-card-main>
                    <p v-if="result.place.location" style="color:#48C8B8">
                        <q-icon name="place" />{{result.place.name}}, {{result.place.location.city}}
                    </p>
                    <p class="text-faded">{{result.start_time}}</p>
                </q-card-main>
                <q-card-separator />
                <q-card-actions>
                    <q-btn flat round dense icon="event" />
                    <q-btn flat color="primary" label="Reserve" />
                </q-card-actions>
            </q-card>
        </div>
    </template>
</ais-results>

{{result.name_event}
250英尺

{{result.place.name}，{{result.place.location.city}

{{result.start\u time}

---

提前感谢社区

只需使用一个简单的CSS网格：

.grid容器{
显示：网格；
网格模板列：重复（2，1fr）；
网格行间距：10px；
栅柱间隙：10px；
}
.q卡{
背景色：#F8；
盒影：0 0 3px#666；
文本对齐：居中；
}
.q卡img{
最大宽度：100%；
}

1
1.1
1.1.1
2.
3.
3.1
4.

您是否愿意使用JavaScript解决方案？使用flex，您可以获得每行相同高度的框，对于您得到的唯一答案，可能会出现重复的无注释的情况。悲伤的故事。你没有显示HTML。您正在显示模板（用于生成实际的HTML）。模板不会帮助其他人帮助你。“这不起作用”不是一个有用的评论。到底是什么不起作用？如果可以的话，我会放一个屏幕截图（更明确），但它会把所有东西都弄得稀薄，破坏事物的显示方式。要得到一个响应迅速的解决方案，你需要使用媒体查询定义不同的网格。