Поиск образца изображения с плавающей слева в vuetify

Question

В моем Laravel 5.6 / «vue»: «^ 2.5.7 /« vuetify »:« ^ 1.0.8 »я ищу образец изображения с плавающей левой и текст справа с реализацией карты. Я искал здесь и не нашел ... Не могли бы вы дать ссылку на пример?

ИЗМЕНЕНО:

Я имею в виду HTML-код, как с длинным текстом:

<div class="card">

                <div class="col-xs-12">
                            <a class="a_link" target="_blank" href="/storage/votes/-vote-14/mammals.jpg">
                            <img class=" pull-left img-medium-preview" src="/storage/votes/-vote-14/mammals.jpg" alt="Which is the tallest mammal?" width="423" height="280">
                        </a>


                    <div>
                        <h5 class="card-title">Which is the tallest mammal?</h5>

                        <p class="card-text">
                            Which is the tallest mammal lorem  ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod  tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim  veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea  commodo consequat. Duis aute irure dolor in reprehenderit in voluptate  velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint  occaecat cupidatat non proident, sunt in culpa qui officia deserunt  mollit anim id est laborum. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

                        </p>
                    </div>

                </div>

            </div>

и похоже на текст с плавающим изображением: https://imgur.com/a/KT4Xg3n

Спасибо!

Answer 1

Vuetify имеет класс left, который применяется float: left !important.
Мы можем использовать это на img (но не в том случае, если оно находится внутри контейнера с display: flex), и тогда текст будет обтекать изображение.

codepen

И добавьте немного стиля, чтобы заставить его действовать быстро:

img {
   max-width: 100%; 
   height: auto;
}

---

В версии vuetify ^1.2.0 Вы можете использовать v-img компонент, который облегчает размещение изображений.

v-card и его дочерние компоненты не имеют специальных опор для такого поведения, поэтому вы можете использовать произвольный макет внутри карты.

<v-card>
  <v-layout>
    <v-flex xs5>
      <v-img src="https://cdn.vuetifyjs.com/images/cards/desert.jpg"></v-img>
    </v-flex>
    <v-flex xs7>
      <v-card-title primary-title>
        <div>
          Text
        </div>
      </v-card-title>
    </v-flex>
  </v-layout>
</v-card>

Затем взгляните на v-img реквизит и стилизуйте изображение по своему усмотрению.

codepen

---

Если вы не используете v-img, вам придется использовать собственный CSS для стилизации вашего изображения.