Search a sample of image floating left in vuetify

Admin 1
Viewed 1497

In my Laravel 5.6/“vue”: "^2.5.7/“vuetify”: “^1.0.8” application I search a sample of image floating left and text at right with card implementation. I searched here and did not find… Could you please give a ref to example?

MODIFIED :

I mean html code like with long text:

<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>

and it looks like that with text floating the image : https://imgur.com/a/KT4Xg3n

Thanks!

vuetify.js css-float image
1 Answers

Vuetify has a class left which applies float: left !important.
We can use that on the img (but not if it's inside a container which has display: flex), and then the text will wrap around the image.

codepen

And add some style to make it act responsively:

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

In vuetify version ^1.2.0 You can use v-img component which makes it easier to place images.

v-card and it's child components don't have specific props for this behavior afaik, so you can use arbitrary layout inside the 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>

Then take a look at v-img props and style the image as you see fit.

codepen

If you are not using v-img then you have to use custom CSS for styling your image.

user_19812470
Related