Обтекание картинки текстом с помощью html и css

Всем привет. В прошлых уроках мы научились вставлять в текст картинки и делать из картинок ссылки. Однако, нерешенной осталась одна проблема. Для того, чтобы страница выглядела красиво и привлекательно, картинка должна обтекаться текстом. Решить эту проблему средствами html и css мы сегодня попробуем.

Как настроить обтекание картинки текстом с помощью html.

Как мы помним, картинка в текст вставляется следующим образом:

<img src=”http://site2.ru/files/image.jpg” />

Для того, чтобы прижать ее к левому краю страницы, и заставить текст обтекать ее справа мы добавляем в код следующий параметр:

<img src=”http://site2.ru/files/image.jpg” align=»left»/>

Как видите, за позиционирование картинки на странице и соответствующие «обтекание» её текстом отвечает атрибут align. Для того, чтобы прижать картинку к правому краю и сделать, чтобы текст обтекал ее слева нужно выставить значение этого атрибута:

align=»right»

Кстати раз уж мы коснулись текста, то рекомендую прочитать статью html теги для оформления текста.

Как настроить обтекание картинки текстом с помощью css.

Данное свойство редко задается напрямую через html. Намного чаще, позиционирование картинки и обтекание ее текстом задается в файле style.css. Это можно сделать, задав изображению класс, и описав этот класс в  css.

Класс мы задаем следующим образом.

<img src=”http://site2.ru/files/image.jpg”class="picture"/>

Идентификатор класса » picture » может быть любым. Главное, чтобы он совпадал в html документе и таблице стилей. Собственно говоря, в таблице стилей ( т.е файле style.css) необходимо прописать следующее свойство

. picture {

    float:left; /* Выравнивание по левому краю */

    margin: 7px 7px 7px 0; /* Отступы вокруг картинки сверху, справа, снизу, слева соответственно*/

   }

Для того, чтобы сделать выравнивание вправо:

. picture {

    float:right; /* Выравнивание по правому краю */

    margin: 7px 7px 7px 0; /* Отступы вокруг картинки сверху, справа, снизу, слева соответственно*/

   }

Ну вот, в общем, и все. Не забывайте писать в комментария насколько вам помогла эта статья, а также ставьте лайки.