image - 在 vuetify 中搜索左浮动的图像样本

Question

在我的 Laravel 5.6/“vue”: "^2.5.7/“vuetify”: “^1.0.8” 应用程序中，我搜索了一个向左 float 的图像样本
和卡片实现右侧的文字。
我搜索了 here并没有找到……
你能给一个引用例子吗？

修改的 :

我的意思是像长文本一样的 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>

它看起来像文本 float 图像: 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并且它的子组件没有针对此行为的特定 Prop afaik，因此您可以在卡内使用任意布局。

<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 props并按照您认为合适的方式设置图像样式。

codepen

如果您没有使用 v-img那么您必须使用自定义 CSS 来设置图像样式。