понедельник, 07 июля 2014
11:14

Как сделать обтекание картинки текстом

marishka_ya
Пример 1: Изображение - слева, текст - справа.
Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее. Обтекание рисунка текстом— один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон. Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.
Так, у тега есть атрибут align, который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right, для выравнивания по левому краю применяют left. Атрибут align часто используют в связке с другими атрибутами тега — vspace и hspace. Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу.
В данном примере был применен html-код <img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" align="left" hspace="8" vspace="5">, где http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg - URL изображения; width - ширина изображения; height - высота изображения; border - рамка вокруг изображения; align="left" указывает на то, что изображение должно располагаться слева; hspace - расстояние от изображения до текста слева и справа; vspace - расстояние от изображения до текста над и под изображением.

Пример 2
Изображение - справа, текст - слева
В этом примере был применен html-код, аналогичный html-коду приведенному выше. Отличие в кодах предлагаю найти Вам :-). Итак, html-код картинки в тексте, расположенной справа: <img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" align="right" hspace="8" vspace="5">. «Пример 2» и «Изображение расположено справа». Ниже приведен пример выравнивания рисунка по центру.

Пример 3
Выравнивание рисунка по центру
Здесь html-код изменен и выглядит так: <center><b>Пример 3<br>Выравнивание рисунка по центру</b><br><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" vspace="5"></center>. В этом случае «Пример 3 Выравнивание рисунка по центру» используется как оглавление и - как и рисунок - выравнен по центру, поэтому и текст и изображение заключены в теги <center>...</center>
Если изображение выравнивается в "просто тексте", то html-код будет такой: <br><center><img src="http://static.diary.ru/userdir/3/2/5/6/3256501/81418388.jpg" width="100" height="75" border="0" vspace="5"><center><div align="left"> и смотреться будет так:
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст
Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст Текст


@темы: html, текст, картинки

URL
Комментарии
12.02.2024 в 15:18

Гость
Здравствуйте, приветствую всех участников форума!

Хотел бы поделиться с вами своим недавним опытом поиска проверенного автосервиса в Оренбурге. После множества попыток, я наконец нашел то место, которым действительно остался доволен — АвтоЛайф.

Что мне особенно понравилось в AutoLife56, так это качество работы каждого специалиста этого сервиса. Мастера не только с высокой точностью решили проблему с моим автомобилем, но и предоставили полезные рекомендации по его дальнейшему обслуживанию.

Мне кажется важным поделиться этой информацией с вами, так как знаю, насколько трудно порой найти действительно надежный сервис. Если вы ищете надежный автосервис в Оренбурге, рекомендую обратить внимание на AutoLife 56, расположенный по адресу: г. Оренбург, ул. Берёзка, 20, корп. 2. Они работают с 10:00 до 20:00 без выходных, и более подробную информацию вы можете найти на их сайте: https://autolife56.ru/.

Надеюсь, мой опыт окажется важным для кого-то из вас. Буду рад получить ваш фидбек, если решите воспользоваться услугами AutoLife 56.

Ремонт трансмиссии в Оренбурге
Список ссылок
Вашему вниманию представляем достойный внимания автосервис в Оренбурге - АвтоЛайф 56 Обзор: заслуживающий доверия автосервис в Оренбурге - AutoLife56 Использование лучшего автосервиса в Оренбурге завершился успехом: АвтоЛайф Находка: надёжный автосервис в Оренбурге - автосервис AutoLife Использование надежного автосервиса в Оренбурге завершился успехом: сервис AutoLife56 52b900d
URL

Расширенная форма

Редактировать

Подписаться на новые комментарии