Question

我在创建响应式卡片时遇到麻烦，该卡片的图像和内容分为2个不同的列。一列包含图片，另一列包含说明。

我尝试使用具有两个不同列的行，但是我做错了事。

<v-layout column>
    <v-card dark flat>

      <v-row>

        <v-col cols="4">
            <v-img src="https://cdn.vuetifyjs.com/images/cards/store.jpg"></v-img>
        </v-col>

        <v-col cols="8">
            <v-card-title><h1>Title</h1></v-card-title>
            <v-card-text>Description</v-card-text>
        </v-col>

      </v-row>
    </v-card>
</v-layout>

上面的代码在单独的行中显示图像和内容。该卡基本上需要具有以下格式：https://uicookies.com/wp-content/uploads/2019/02/CSS-Cards-E-Commerce-Shop-Card.jpg

Answer 1

可以使用v-list-item组件创建内容旁图片

此处工作的Codepen：https://codepen.io/chansv/pen/LYYjPKB?editors=1010

<div id="app">
  <v-app id="inspire">
    <v-card
      class="mx-auto"
      max-width="700"
      outlined
    >
      <v-list-item>
        <v-list-item-avatar
          tile
          size="300"
          color="grey"
        ></v-list-item-avatar>
        <v-list-item-content>
          <div class="overline mb-4">OVERLINE</div>
          <v-list-item-title class="headline mb-1 pink--text">Women's Running Shoe</v-list-item-title>
          <v-list-item-title class="title mb-1">Nike epic react</v-list-item-title>
          <div>content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react content for Nike epic react v content for Nike epic react content for Nike epic react v content for Nike epic react</div>
        <v-btn text>Button</v-btn>
        </v-list-item-content>


      </v-list-item>
    </v-card>
  </v-app>
</div>

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

})

如何将卡片图像和卡片内容彼此对齐？威化

1 个答案: