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-endalign-end但这些都无法将我的卡片（带有“右下角”文本的卡片）移动到右侧或底部。我尝试使用 vuetify 网格，但也没有成功。我也将代码放在以下链接下的 codepen 上： https://codepen.io/carluri/pen/jObPOMK有人知道如何将黑卡移动到覆盖层的右下角吗？任何帮助表示赞赏。

Answer 1

您可以使用一些弹性盒来完成所有这些操作。

例子：

<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>

        <div class="d-flex fill-height" style="flex-direction:column">

          <div class="d-flex fill-height align-center justify-center">

            <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>

          </div>

          <div class="d-flex">

            <v-spacer></v-spacer>

            <div class="pa-3">Text bottom right</div>

          </div>

        </div>

      </v-overlay>

    </v-img>

  </v-card>

</v-app>

Codepen 示例