Оцените, как переместить карту в нижний правый угол наложения - PullRequest
Новая
       152

Оцените, как переместить карту в нижний правый угол наложения

0 голосов
/ 12 апреля 2020

Немного пытался расположить карту на оверлее, используя 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, но также не смог успешно.

Я также поместил код на коде по следующей ссылке https://codepen.io/carluri/pen/jObPOMK

Кто-нибудь знает, как переместить эту черную карту в нижний правый угол? оверлея?

Любая помощь приветствуется.

спасибо.

1 Ответ

1 голос
/ 14 апреля 2020

Вы можете сделать все это с некоторыми флексбоксами.

Пример: 

<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

...