Home Создаем свой сайт Обтекание картинки текстом с помощью html и css

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

by admin

Всем привет. В прошлых уроках мы научились вставлять в текст картинки и делать из картинок ссылки. Однако, нерешенной осталась одна проблема. Для того, чтобы страница выглядела красиво и привлекательно, картинка должна обтекаться текстом. Решить эту проблему средствами 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; /* Отступы вокруг картинки сверху, справа, снизу, слева соответственно*/

}

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

3 комментария
0

Вам также может пригодиться:

3 комментария

Владимир Игоревич 4 сентября 2012 - 17:51

html сейчас уже практически не используется. В основном все оформление задается через style.css

Reply
Яр 25 января 2018 - 11:45

Да ладно, умник. Это как ПК настольные отмирают, с 2000х слышу.

Reply
Эд 16 марта 2014 - 20:20

В комментарии ошибку исправь (там где флоат:райт)

Reply

Leave a Comment