css - 如何使用 CSS 或 Vuetify 独立于侧面的 div 垂直堆叠 div？

Question

我希望我的 div 在不跟随 div 的高度的情况下彼此重叠。

目前我的 div 显示如下：

我不希望 div 之间的空白只是因为其中一个 div 更大。它应该是这样的：

我正在使用 Vuetify，因此该解决方案可能使用 vuetify 类或纯 CSS。

编辑：

为了更好地解释，所需的行为几乎是这样的：

来源：https ://starkwang.github.io/vue-virtual-collection/demo/dist/index.html

标签： cssvuetify.js

Answer 1

理解框架类比使用 CSS 提出“修复”更重要。

检查网格文档以及行和列的工作方式。

您可以将这些块放在不同的行中，并且它们会对齐：

<div id="app">
  <v-app id="inspire">
    <v-container fluid grid-list-lg>
      <v-layout row wrap>
        <v-flex xs12 sm12 md4>
          <div class="content div1"></div>
        </v-flex>
        <v-flex xs12 sm12 md4>
          <div class="content div2"></div>
        </v-flex>
        <v-flex xs12 sm12 md4>
          <div class="content div3"></div>
        </v-flex>
      </v-layout>
      <v-layout row wrap>
        <v-flex xs12 sm12 md4>
          <div class="content div1"></div>
        </v-flex>
        <v-flex xs12 sm12 md4>
          <div class="content div2"></div>
        </v-flex>
        <v-flex xs12 sm12 md4>
          <div class="content div3"></div>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

https://codepen.io/fabiozanchi/pen/RzVYMZ