How to Wrap Text Around Image in CSS
на канале: Internet Services and Social Networks Tutorials from HowTech
In this tutorial you will see how to wrap text around images by applying CSS image floating.
Don't forget to check out our site http://howtech.tv/ for more free how-to videos!
/ ithowtovids - our feed
/ howtechtv - join us on facebook
https://plus.google.com/1034403827176... - our group in Google+
Most of the web pages contain text around images. This technique is actually called wrapping the text around the image.
Follow this easy step by step tutorial to learn how to wrap text around images through CSS and see how the alignment classes work.
Step 1 - Specifying the Image and Writing Text
First of all, give the path of the image in double quotes within the image source tag. Within the same tag, specify CSS image floating class which would be used for aligning the image. First use the "Float Left" element.
After that, open up the paragraph tag and just write any text within that.
Then, open up the image source tag once more and repeat the same steps, but this time, use the float right class for aligning the image.
Make sure to close the paragraph tags after the texts.
With that done, close the body and html tags as well.
Step 2 - Defining the Classes
Now let's define the CSS image floating classes, declared in previous steps.
For that, open up the style tag before the body tag and let's understand the working of the classes.
The float method in the float left class is actually placing the image to the left with 4 pixels from the left corner of the screen. Similarly, the float right element inside float right class moves the image to the right side.
With that done, close the style tag and save the HTML document.
Step 3 - Viewing the Effect
Now when we open up the HTML file in the browser, we will see the text around images would be wrapped according to our code.
And that is how text is wrapped around an image.
Смотрите видео How to Wrap Text Around Image in CSS онлайн без регистрации, длительностью часов минут секунд в хорошем качестве. Это видео добавил пользователь Internet Services and Social Networks Tutorials from HowTech 12 Июнь 2013, не забудьте поделиться им ссылкой с друзьями и знакомыми, на нашем сайте его посмотрели 21,101 раз и оно понравилось 41 людям.