搜索在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），然后文本将环绕图像。

代码笔

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

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道具并根据您认为合适的方式设计图像。

代码笔

如果您不使用v-img，则必须使用自定义 CSS 来设置图像样式。