Vuetify 如何将卡片移动到叠加层的右下角

Question

尝试使用 vuetify 将卡片放置在覆盖层上时遇到了很大的困难。

我有以下代码：

<v-app id="app"> 

<v-card width="450" max-height="100">

    <v-img max-height="400" src="https://picsum.photos/450/450">

      <v-overlay absolute>

        <v-card flat color="transparent">

          <v-card-text

            class="white--text font-weight-black"

            :class="headingClass"

            >Center</v-card-text

          >

          <v-card-subtitle class="white--text" :class="subtitleClass">Center</v-card-subtitle>

        </v-card>

        <v-card>

          <v-card-text>Bottom Right</v-card-text>

          </v-card>

      </v-overlay >

    </v-img>

  </v-card>

 </v-app>

我已经测试过添加课程

justify-end

align-end

但这些都无法将我的卡片（带有“右下角”文本的卡片）移动到右侧或底部。

我尝试使用 vuetify 网格，但也没有成功。

我也将代码放在以下链接下的 codepen 上： https://codepen.io/carluri/pen/jObPOMK

有人知道如何将黑卡移动到覆盖层的右下角吗？

任何帮助表示赞赏。

Answer 1

您可以使用一些弹性盒来完成所有这些操作。例子：<v-app id="app">&nbsp; <v-card width="450" max-height="100">&nbsp; &nbsp; <v-img max-height="400" src="https://picsum.photos/450/450">&nbsp; &nbsp; &nbsp; <v-overlay absolute>&nbsp; &nbsp; &nbsp; &nbsp; <div class="d-flex fill-height" style="flex-direction:column">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="d-flex fill-height align-center justify-center">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-card flat color="transparent">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-card-text class="white--text font-weight-black" :class="headingClass">Center</v-card-text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-card-subtitle class="white--text" :class="subtitleClass">Center</v-card-subtitle>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </v-card>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="d-flex">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <v-spacer></v-spacer>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="pa-3">Text bottom right</div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; </v-overlay>&nbsp; &nbsp; </v-img>&nbsp; </v-card></v-app>Codepen 示例