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

【问题标题】：Vuetify how to move a card to the bottom right corner of an overlayVuetify 如何将卡片移动到叠加层的右下角
【发布时间】：2020-07-24 18:55:09
【问题描述】：

一直在努力尝试使用 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

有谁知道如何将那张黑卡移动到叠加层的右下角？

感谢任何帮助。

谢谢。

【问题讨论】：

我建议先修改你的标记。就目前而言，做你想做的事情的唯一方法是使用<v-overlay> 中的绝对定位元素，这对响应不是很友好。但是，如果您不介意，可以在这里查看我的叉子 -> codepen.io/tkd21/pen/yLYNgOq
感谢@TKD21，这对现在很有用，但我同意这可能不是最好的。您是否有更好的建议，以便我想要做的响应更友好？基本上，我有一张带有图像的卡片，想要在图像顶部放置一些文本，以便轻松阅读它，我需要在图像上放置一个叠加层以获得更好的对比度。中间会有一些文本，右下角会有一个小文本来提供有关图像的信息。如果有比我展示的标记更好的方法来实现它，我将很乐意实现它。干杯！！！
我能想到的一个肮脏的技巧是尝试将“右下”元素与其他两个元素分开 - 将其放在自己的 <v-overlay> 中。通过使用 align-end 和 justify-end 之类的类处理第二个叠加层来定位您的“右下角”元素。然后将第二个叠加层的opacity 属性设置为0（默认值为0.46），如<v-overlay> 的Vuetify 文档中所述。

标签： html vue.js overlay vuetify.js nuxt.js

【解决方案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 example

【讨论】：