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

Question

一个简单的问题，有时候我在卡中有更多的内容（使其更大），并且我希望较小的卡片能够自动采用较大卡片的高度。

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

我正在使用quasar（vuejs框架）和手写笔

这是我关于盒子css的代码：

String

更新 和有关的html：

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

提前感谢社区！

Answer 1

只需使用简单的CSS网格：

.grid-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-row-gap: 10px; 
  grid-column-gap: 10px;
}

.q-card {
  background-color: #f8f8f8;
  box-shadow: 0 0 3px #666;
  text-align: center;
}

.q-card img {
  max-width: 100%;
}

<div class="grid-container">
  <div class="q-card">1 <br />1.1<br />1.1.1</div>
  <div class="q-card">2</div>
  <div class="q-card">3
    <img src="https://lorempixel.com/420/320/abstract/1/Sample" alt="" />
    3.1
  </div>
  <div class="q-card">4</div>
</div>

所有网格项目在每行的高度都会自动相等，这似乎正是您要寻找的。

如果您需要固定宽度的列，请执行以下操作：

grid-template-columns: repeat(2, 500px);