在 vuetify 中搜索左侧浮动的图像示例

Question

在我的 Laravel 5.6/“vue”: "^2.5.7/“vuetify”: “^1.0.8” 应用程序中，我搜索了一个向左浮动的图像示例和右侧的文字与卡片实施。我搜索了 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>

看起来像文字漂浮在图像上：https://imgur.com/a/KT4Xg3n

谢谢！

Answer 1

Vuetify 有一个 class left 适用于 float: left !important.
我们可以在 img 上使用它（但如果它在具有 display: flex 的容器内则不能），然后文本将环绕图像。

codepen

并添加一些样式使其响应：

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

在 vuetify 版本中 ^1.2.0 您可以使用 v-img 组件，这样可以更轻松地放置图像。

v-card 并且它的子组件没有针对此行为 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 来设置图像样式。

在 vuetify 中搜索左侧浮动的图像示例

Search a sample of image floating left in vuetify

image

css-float

vuetify.js