Question

这是我的简单示例：

https://codesandbox.io/s/vue-template-yhz1w?fontsize=14

<template>
  <v-app>
    <v-content class="ma-4">
      <v-row>
        <v-col>
          <v-card height="200" width="400" style="border: 1px; border-color: black;">
            <v-content class="ma-2">
              <v-row>
                <v-col>Top Left</v-col>
                <v-col>Top Right</v-col>
              </v-row>
              <v-row>
                <v-col>Bottom Left</v-col>
                <v-col>Bottom Right</v-col>
              </v-row>
            </v-content>
          </v-card>
        </v-col>
      </v-row>
    </v-content>
  </v-app>
</template>

我有一张卡片，并且想知道如何根据标题含义对齐这些标题。左上角必须靠近左上角，右下角-靠近右下角，依此类推。

我应该在布局中添加些什么以使其正确对齐？

Answer 1

查看文档，您需要给出v行的高度。否则，它将保持在最小高度。

<v-row style="height: 100px">
  <v-col>Top Left</v-col>
  <v-col align="right">Top Right</v-col>
</v-row>
<v-row align="end" style="height:100px">
  <v-col>Bottom Left</v-col>
  <v-col align="right">Bottom Right</v-col>
</v-row>

对齐Vuetify卡组件中的行

1 个答案: