堆叠 V-Card 子级重叠和错位

Question

我正在尝试将 v-card-title 叠加在 v-card-subtitle 之上，然后 v-card-text 和文字重叠。默认情况下这些元素不是垂直堆叠的吗？:

<v-main>
  <v-container fluid style="padding:0px"> 
    <v-row no-gutters>
      <v-col :cols="12" :md="6">

        <v-card 
           height='100%' 
           style="position: relative"
           elevation="0">

           <v-card-title
             class="header">
                  lorem ipsum dolor
           </v-card-title>

           <v-card-subtitle class="subHeader">
              lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
           </v-card-subtitle>

           <v-card-text class="subText">
               lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum 
               dolor lorem ipsum dolor dolor lorem ipsum dolor dolor lorem ipsum 
               dolor
           </v-card-text>
        </v-card>
      </v-col>
      <v-col :cols="12" :md="6">
        <v-img :src="{myImage}"></v-img>
      </v-col>
    </v-row>
    {...about 4 more rows identical to above...}
  </v-container>
</v-main>

这是我的风格：

.header{
    font-family: 'Cormorant Garamond', serif;
    font-size: 85px;
  }
  .subHeader{
    font-family: 'Montserrat', sans-serif;
    font-size: 28px;
  }
  .subText{
    font-family: 'Montserrat', sans-serif;
    font-size: 15px;
    letter-spacing: 1.5px;
    color:#333;
  }

然后如果我尝试在 v-card 上使用它来垂直 + 水平居中所有内容，那么所有内容都会水平排列：

class="d-flex align-center justify-center"

我只是没有得到什么？

Answer 1

使用 d-flex 将您的卡片变成一个 flexbox 容器，转换直接 children 元素。您看到的是 flex children 的默认行为。它们显示在一行中，因为默认情况下 flex-direction 属性设置为 row。在 MDN Web Docs.

阅读更多内容

无论如何，在这种情况下您不需要使用d-flex。 Vuetify 提供了一个助手 class fill-height，它将 v-container 的内容居中。来自 docs:

fill-height applies height: 100% to an element. When applied to v-container it will also align-items: center.

例如：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
})

<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<div id="app">
  <v-app>
    <v-main>
      <v-container fluid fill-height style="padding:0px">
        <v-row no-gutters justify=center>
          <v-col cols="6">
            <v-card class="" elevation="2" >
              <v-card-title class="header">
                lorem ipsum dolor
              </v-card-title>

              <v-card-subtitle class="subHeader">
                lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor
              </v-card-subtitle>

              <v-card-text class="subText">
                lorem ipsum dolorlorem ipsum dolorlorem ipsum dolorlorem ipsum dolor lorem ipsum dolor dolor lorem ipsum dolor dolor lorem ipsum dolor
              </v-card-text>
            </v-card>
          </v-col>
        </v-row>
      </v-container>
    </v-main>
  </v-app>
</div>

<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>

堆叠 V-Card 子级重叠和错位

Stacking V-Card children overlaps and misaligns

vue.js

vuetify.js