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

但其中 none 能够将我的卡片（带有 "Bottom Right" 文字的卡片）移到右侧或底部。

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

我也把代码放在 codepen 的下面 link https://codepen.io/carluri/pen/jObPOMK

谁知道怎么把那张黑卡移到叠加层的右下角？

感谢任何帮助。

谢谢。

Answer 1

您可以使用一些 flexbox 来完成所有这些。

示例：

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

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

Vuetify how to move a card to the bottom right corner of an overlay

html

overlay

vue.js

nuxt.js

vuetify.js