выровнять правый v-list-item-content - PullRequest
Новая
       6

выровнять правый v-list-item-content

0 голосов
/ 04 октября 2019

Мой скрипт такой:

==================== ----- ==================== ----- =================== 

<template>
  <v-card
    max-width="1200"
    class="mx-auto"
  >
    <v-container
      class="pa-2"
      fluid
    >
      <v-row>
        <v-col
          v-for="(item, i) in items"
          :key="i"
        >
          <v-card
            :color="item.color"
            dark
          >
            <v-list-item three-line>

              <v-list-item-avatar
                size="125"
                tile
              >
                <v-img :src="item.src"></v-img>
              </v-list-item-avatar>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>

              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>

            </v-list-item>
          </v-card>
        </v-col>
      </v-row>
    </v-container>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      items: [
        {
          color: '#1F7087',
          src: 'https://cdn.vuetifyjs.com/images/cards/foster.jpg',
          title: 'Supermodel',
          artist: 'Foster the People',
        }
      ],
    }),
  }
</script>

==================== ----- ==================== ----- ===================

Результат примерно такой:

Result image

Я хочу "выровнять по правому краю" в правильном положении

Как я могу это сделать?

Пожалуйста, помогите мне, ребята. Большое спасибо

Ответы [ 2 ]

0 голосов
/ 06 октября 2019

Вы можете использовать вспомогательный класс для выравнивания текста. 

<v-list-item-content class="text-right align-self-start">
    <v-list-item-title
        class="headline mb-2"
        v-text="'right align'"
        >
    </v-list-item-title>
</v-list-item-content>
0 голосов
/ 04 октября 2019

Используйте <v-spacer></v-spacer> между двумя <v-list-item-content>. 

 <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="item.title"
                ></v-list-item-title>

                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
                <v-list-item-subtitle v-text="item.artist"></v-list-item-subtitle>
              </v-list-item-content>
<!-- This one -->  <v-spacer></v-spacer> <!-- This one -->
              <v-list-item-content class="align-self-start">
                <v-list-item-title
                  class="headline mb-2"
                  v-text="'right align'"
                ></v-list-item-title>
              </v-list-item-content>
...