Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в HTML, а так же при помощи CSS свойств и значений.
Обтекание картинки текстом при помощи HTML
Наиболее простой, способ позиционирования картинки на странице это воспользоваться средствами HTML. Но у данного способа, по сравнению с возможностями CSS есть недостаток, в нем нет возможности установить отступ между картинкой и текстом, а лишь можно сделать так, чтобы текст обтекал изображение.
Рассмотрим все по порядку. Для вставки картинки в HTML страницу используется тег img, подробнее смотрите урок, как вставлять картинки в HTML: http://webmastermix.ru/lessons-html/14-how-inser-a-picture-in-html.html. Поэтому, чтобы вставить картинку в текст HTML страницы, достаточно в коде прописать следующее:
— где foto.jpg — это относительный путь к картинке. Можно задать и абсолютный путь, тогда нужно прописать URL вида: http://webmastermix.ru/foto.jpg
У тега img имеется атрибут align, который и определяет по какому краю будет расположена картинка и с какого края ее будет обтекать текст (например align=»left» по левому краю). Атрибут align имеет следующие значения:
- left — изображение будет расположено по левому краю, а текст будет обтекать его справа;
- right — изображение расположится справа, а текст будет обтекать его слева;
- bottom — отвечает за вертикальное выравнивание, при этом картинка будет находится слева, а нижняя часть изображения на против первой строки текста, это значение задано по умолчанию;
- top — тоже, что и предыдущее значение, только строчка текста будет располагаться по верхней границе изображения;
- middle — при данном значении происходит выравнивание середины изображения по базовой линии строки.
Теперь рассмотрим каждый элемент на практике.
1. Как я уже упоминал, по умолчанию картинке заданно значение bootom, т. е. не зависимо от того, пропишем мы его или нет наша картинка по отношению к тексту будет позиционирована так:
2. Чтобы выровнять изображение по левому краю, а текст его обтекал справа нужно прописать следующее:
Пример:
3. Для выравнивания изображения по правому краю нужно соответственно прописать:
Пример:
4. Теперь рассмотрим вертикальное выравнивание. Если применить значение top, то первая строчка текста будет расположена на против верхней границы изображения.
Пример:
5. Выравнивание текста по центру картинки. Данный прием очень хорошо применять если вам нужно небольшую картинку расположить по центру строки.
Пример:
Обтекание картинки текстом при помощи свойств CSS
Как вы могли заметить на вышеприведенных примерах наша картинка и текст не совсем красиво располагаются по отношению друг к другу. Расположить их красиво на помогут CSS стили, которые можно добавить к картинке задав ей определенный класс и применив нужные свойства. Если вы не знаете, что такое CSS смотрите урок Основы CSS и важные понятия: http://webmastermix.ru/lessons-css/17-bases-css.html.
На самом деле, те примеры создающей обтекание текста и позиционирование картинки, которые мы рассмотрели выше являются немного устаревшими, сейчас принято все элементы отвечающие за внешний вид страницы делать при помощи свойств и значений CSS.
Разберем простой пример, как сделать обтекание картинки текстом, когда картинка расположена по левому краю, а текст обтекает ее справа. При этом между текстом и картинкой зададим определенные отступы.
В начале нужно присвоить нашей картинке определенный класс, тут можете использовать любое слово главное чтобы патом вы поняли за, что именно этот класс отвечает, в дизайне вашей страницы. Делается это так:
Теперь классу leftfoto нужно присвоить определенные CSS стили.
Данный код располагают между тегами <head>…</head>, заключив в теги <style>…</style> или помещают во внешний файл стилей CSS.
Разберем те элементы, которые мы здесь задали:
- float:left; — мы позиционировали картинку по левому краю и заставили обтекать текст вокруг картинки справа, это по сути то же самое, что и атрибут align=»left».
- margin: 4px 10px 2px 0px; — мы задали внешние отступы, 4px — от верха, 10px — справа, 2px снизу и 0px слева от изображения.
Пример:
Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями:
Здесь мы добавили следующие элементы:
- border:1px solid #CCC; — задали сплошную линию размером 1 пиксель и светло серым цветом;
- padding:6px; — задали внутренний отступ между изображением и рамкой, равный 6 пикселям.
Пример:
Материал подготовлен проектом: WebMasterMix.ru
webmastermix.ru
Как сделать обтекание текстом картинки в html
Как вы должны знать, изображение вставляется на веб-страницу с помощью тега img. У него есть один обязательный атрибут – "src"(source), который задает путь до картинки. Что будет, если мы просто вставим изображение рядом с текстом? Смотрите скриншот.
Как видно, сбоку осталось много неиспользованного места, но сейчас мы это исправим. Обтекание картинки (да и вообще любого другого элемента) задается в css. Для этого есть свойство float. По сути, у свойства есть два значения, которые нам сейчас интересны:
Left – элемент прижимается к левому краю, все остальные элементы и текст обтекают его справа.
Right – прижимается к правому краю.
Отлично, давайте попробуем на практике. Поскольку в нашем примере всего одно изображение, то в css можно обратиться к нему по селектору img. На реальном сайте так делать, конечно, не стоит, потому что правило обтекания применится ко всем картинкам.
Img{ Float: left }Результат:
Ну так-то оно получше, правда? Пока текст располагается очень близко к изображению, но это исправляется заданием внутренних или внешних отступов картинке.
Соответственно, справа картинку можно расположить так:
Img{ Float: right; }
Вот, собственно, и весь секрет обтекания изображений текстом. Именно таким в статьях изображения прижимаются к левому или правому краю, а свободное место занимает текстовая информация.
Отмена обтекания
Для отмены этого свойства прописывается float: none. После этого элемент начинает вести себя по обычным правилам. Свойство float уже давно введено в css и его использование является абсолютно правильным с точки зрения веб-стандартов. Плавающие блоки (float) поддерживаются во всех браузерах, которые сегодня используются.
Теперь при необходимости вы сможете сделать в html обтекание картинки текстом. Ну или хотя бы будете знать о том, как это работает и что вся суть в css свойстве float.
dolinacoda.ru
Как сделать обтекание картинки текстом
В предыдущей статье мы рассматривали вопрос, как вставить картинку в текст, теперь будем учиться делать обтекание картинки текстом.
Мы вставили картинку в статью, однако пока все выглядит довольно таки некрасиво — текст не обтекает картинку. Сейчас мы это исправим.
Наша задача вставить картинку так, чтобы между картинкой и текстом был определенный отступ, и наша картинка как бы обтекалась текстом. Этого можно добиться тремя способами:
- Обтекание картинки текстом средствами HTML;
- Обтекание картинки текстом средствами CSS;
- Обтекание картинки текстом средствами редактора Joomla.
Обтекание картинки текстом в HTML
Для того, чтобы текст обтекал картинку мы выделим фрагмент документа с картинкой и пропишем стиль для этого фрагмента прямо внутри HTML документа. Здесь нужно определиться, по какому краю вы будете выравнивать изображение по левому или по правому. Если вы выравниваете картинку по левому краю, нужно чтобы текст обтекал ее справа. И наоборот, если вы вставляете картинку справа, нужно чтобы текст обтекал картинку слева.
Допустим, нужно выровнять картинку по левому краю с обтеканием текста по его правой стороне и задать отступы: сверху — 5px, справа — 10px, снизу — 5px, слева — 0px.
- Для выделения фрагмента (блока) в документе в HTML служит элемент <div>
<div>…</div> - Для определения стиля элемента служит универсальный атрибут <style>
<div style=…>…</div> - Свойство <float> отвечает за выравнивание элемента по определенному краю, с обтеканием его остальными элементами с других сторон
- Свойство <margin> отвечает за область внешних отступов:
<margin-bottom> устанавливает размер отступа от нижней границы элемента;
<margin-left> размер отступа от левой границы элемента;
<margin-right> размер отступа от правой границы элемента;
<margin-top> размер отступа от верхней границы элемента.
Зададим фрагменту документа с картинкой стиль, используя вышеописанные свойства:
<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «>Картинка</div>
Код нашей картинки в HTML выглядит так:
<img src=»/images/joomla/adminka_20.png» border=»0″/>
Вставим в div нашу картинку, в результате получилось:
<div style=»float:left; margin-top: 5px; margin-right: 10px; margin-bottom: 5px; margin-left: 0px; «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>
Сократим запись:
<div style=»float:left; margin: 5px 10px 5px 0px «><img src=»/images/joomla/adminka_20.png» border=»0″/></div>
На картинке ниже вы видите данный код в HTML документе.
Вот так теперь выглядит наша статья. Картинка обтекается текстом, между текстом и картинкой появился отступ.
Если вы будете вставлять картинку, выравнивая ее по правому краю, соответственно html-код будет несколько другим:
<div style=»float:right; margin-top: 5px; margin-right: 0px; margin-bottom: 5px; margin-left: 10px;»> После картинки вставляем код: </div>.
Можете поэкспериментировать с кодами. Главное добиться желаемого результата. И еще совет, обязательно просматривайте результаты ваших экспериментов хотя бы в основных браузерах: Internet Explorer, Mozilla Firefox, Opera. Если все выглядит как вы планировали, значит, вы со своей задачей справились.
Однако, хотелось бы заметить, что применение внутренних стилей скорее должно быть исключением, чем правилом. Для того чтобы не засорять html-код лишними тегами, тем самым увеличивая время загрузки веб-страниц, лучше все-таки делать все по правилам. То есть, стили нужно прописывать в соответствующих файлах CSS.
Обтекание картинки текстом в CSS
Прописать стиль для картинки с обтеканием текста в CSS совсем несложно. И заметьте, насколько уменьшается количество тегов в документе, по сравнению с вышеописанным методом.
- За вывод изображения на веб-страницу отвечает тег <img>.
- За выравнивание элемента по определенному краю, с обтеканием его остальными элементами отвечает свойство <float>.
- За область внешних отступов отвечает <margin>.
- Класс (.class) в CSS служит для придания элементам индивидуального стиля, отличного от основного стиля, прописанного в документе.
Сначала добавим класс стиля к изображению. Для этого, селектору img дадим имя .fotoleft. Открываем файл с расширением .css, в котором прописаны стили и прописываем стиль для нашей картинки:
Img. fotoleft {
float: left;
margin: 12px 12px 12px 0;
}
Теперь применим класс class=»fotoleft» к тегу <img> в файле HTML. Открываем статью в исходном коде и прописываем класс для картинки:
<img src=»/картинка.png» width=»150″ height=»110″ class=»fotoleft» />
Таким образом, мы выровняли картинку по левому краю с обтеканием текста по его правой стороне и задали величину отступов: сверху — 12px, справа — 12px, снизу — 12px, слева — 0px. Теперь, чтобы таким же образом выровнять любую другую картинку, нужно всего лишь присвоить ей созданный нами класс стиля.
Обтекание картинки текстом в Joomla
Выровнять изображение по краю можно с помощью меню «Вставить/редактировать изображение». Для этого вы должны кликнуть по изображению в нашей статье, вокруг картинки появиться рамка. Затем кликните по иконке «Вставить/редактировать изображение».
Перед вами откроется окно, в котором надо перейти на вкладку «Оформление». Здесь можно не только установить отступ, но и изменить размеры изображения.
Для того, чтобы текст обтекал картинку, установите в строке Стиль (Style) значение:
float: left; — если выравниваете картинку по левому краю (alignment: left);
float: right; — если выравниваете картинку по правому краю (alignment: right).
Для того, чтобы текст не слился с картинкой, задайте горизонтальные и вертикальные отступы — 10 (px). После того как оформите изображение, не забудьте нажать на кнопку «Обновить»
Вы видите, что у нас появился отступ. Кстати, с помощью меню «Вставить/редактировать изображение» вы можете сделать подпись под изображением или чтобы подпись появлялась при наведении курсора на изображение и т.д. В этом, думаю, не сложно разобраться, поэкспериментировав с настройками.
С вставкой изображений в текст мы разобрались, следующая моя статья будет посвящена созданию меню для самостоятельной статьи.
www.webadvisor.ru
HTML обтекание картинки текстом
Пример:
<title>Пример ХТМЛ обтекания картинок текстом</title> |
Результат:
Посмотреть в новом окне: HTML картинка с обтеканием
Атрибуты и значения
- align="top" – выравнивает картинку и текст по верху.
- align="middle" – выравнивает картинку и текст по центру, по вертикали.
- align="bottom" – выравнивает картинку и текст по низу.
Обратите внимание на способ подгрузки изображения: ../images/2121.png. Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самой картинки.
Способы горизонтального обтекания HTML текста
Пример:
<title>HTML текст обтекает картинку справа</title> |
Результат:
Посмотреть в новом окне: HTML картинка и текст
Пример HTML обтекания текста картинкой справа
Пример:
<title>HTML картинка справа – текст слева</title> |
Результат:
Посмотреть в новом окне: Обтекание HTML текста и картинки справа
1 3 4 5 6 7 8 9 10 11 12
Дата публикации: Июль 2011 | Обновление: Ноябрь 2018
HTML изображение HTML обтекание текста и картинки
ab-w.net
Выравнивание изображения по центру
Для выравнивания изображения по центру колонки текста, проще всего тег <img> поместить в контейнер <p>, для которого ставится атрибут align=»center». Если ожидается частое использование картинок, то оптимальнее будет применение CSS стиля для тега <p>. Как это реализовано, смотрите в примере 1.
Пример 1. Выравнивание рисунка по центру
В данном примере к контейнеру <p> добавляем CSS-класс cimg, в котором прописывается выравнивание по центру строки. То, как это будет схематично выглядеть — показано на рисунке 1.
Рис. 1. Рисунок в центре колонки текста
Обтекание изображения текстом
Обтекание изображения текстом — один из самых распространненых способов верстки HTML-страниц, который позволяет эффективно использовать все свободное пространство. популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для того чтобы настроить обтекание изображения текстом можно использовать несколько способов, основанных как и на HTML так и на CSS.
Рис. 2. Рисунок выровнен по левому краю страницы и обтекается текстом справа
Для того, чтобы осуществить обтекание изображения текстом с помощью HTML нужно помнить, что у тега <img> есть атрибут align, который определяет выравнивание изображения в документе и при этом указывает способ обтекания изображения текстом. Для того, чтобы сделать выравнивание изображения по правому краю и задать обтекание слева, нужно использовать align=»right», для выравнивания по левому краю и обтекания текстом справа используем align=»left». Здесь также полезно использовать атрибуты тега <img> — vspace и hspace, которые указывают на каком расстоянии текст будет обтекать изображение по вертикали и горизонтали. Без указания этих атрибутов текст будет вплотную прилегать к изображению (пример 2).
Пример 2. Обтекание изображения текстом с использованием HTML
Для того чтобы настроить обтекание изображения с помощью CSS стилей будем использовать правило float. float:right — выравнивает изображение по правому краю документа и делает обтекание текстом слева, а float:left делает выравнивает изображение по левому краю документа и обтекание текстом справа от изображения (пример 3).
Пример 3. Обтекание изображения текстом с использованием CSS
Здесь к тегу <img> добавляется класс cimg, у которого установлено выравнивание по правому краю float:right, а обтекание картинки слева и снизу задано свойствами padding-left:10px и padding-bottom:10px.
Изображение на поле
При таком формате размещения изображения в документе обтекание изображения происходит только с одной стороны. Данный способ размещения напоминает двух колоночную структуру, где в одной колонке размещается картинка, а во второй — текст.
При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рисунок 3).
Рис. 3. Размещение изображения в поле слева от текста
Я знаю два способа создать подобную структуру — с помощью HTML-тегов <table> и с помощью CSS-правила margin. Рассмотрим эти два способа:
Таблицы: данный способ удобен тем, что легко и понятно позволяют организовать колоночную структуру с помощью ячеек. Данный способ является олдскульным и его применение не особо приветствуется в современном веб-дизайне. Считается что данный способ избыточен и сложен в правке. Но все новички через него проходят. Для такой структуры нам потребуется таблица с тремя колонками, в первой колонке будет само изображение, в третьей текст, а между ними мы укажем отступ — во второй колонке. Можно обойтись и двумя колонками, а отступ указать через CSS-стили или с помощью атрибута width тега (пример 4).
Пример 4. Размещение изображения на поле с помощью таблиц
то, что получится в результате показано на рисунке 4.
Рис. 4. Изображение на поле слева от текста
В примере 4 ширина изображения составляет 90 пикселей, а ширина колонки, где он располагается — 110 пикселей. Разница между ними обеспечивает нам нужный отступ от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте — vertical-align: top.
CSS-стили: Данный пример более предпочтителен и оптимален. Здесь нам потребуется два слоя <div>, параметры которых мы укажем через CSS. В одном слое будет находиться изображение, а в другом текст. Как это работает, смотрите в примере 5:
Пример 5. Размещение изображения на поле с слоев и CSS-стилей
Свойство float:left для слоя #pic нужно, чтобы задать примыкание изображения к левому краю документа, а верхняя строка текста совпадала с верхней строкой изображения. Без этого свойства слой #text опускается вниз на высоту изображения. Также для слоя #text указываем отступ слева margin-left:110px на расстояние 110 пикселей, чтобы там текст не налазил на изображение. Если изображение нужно разместить в правом поле, то указываем float:right для #pic и margin-right:110px для #text.
P.S.: Согласно спецификации HTML4 изображения должны помещаться внутри блочных элементов таких как div или p.
www.webmancer.org
| Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
| 6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Задача
Добавить изображение на страницу так, чтобы оно обтекалось рядом лежащим текстом.
Решение
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору IMG. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
Пример 1. Обтекание картинок
HTML5CSS 2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Обтекание</title> <style> .leftimg { float:left; /* Выравнивание по левому краю */ margin: 7px 7px 7px 0; /* Отступы вокруг картинки */ } .rightimg { float: right; /* Выравнивание по правому краю */ margin: 7px 0 7px 7px; /* Отступы вокруг картинки */ } </style> </head> <body> <h2>Доклад лейтенанта Бокатуева</h2> <p><img src="images/1.jpg" alt="Лейтенант Бокатуев" width="132" height="174" class="leftimg"> Вчера во время проведения разведоперации наша группа подверглась нападению неизвестного противника в камуфляжной форме Алиенов. В результате эффективной обороны и стремительной контратаки многочисленная группа боевиков была смята и отброшена. Среди личного состава потерь нет. Бойцы разведгруппы проявили недюжие навыки владения оружием. Особо отличился в бою взводный Кудряшев М.А., грамотно использовавший человеческие ресурсы своего взвода. В результате операции были захвачены элементы внеземной культуры, которые переданы аналитической группе.</p> <h2>Пресс-релиз аналитической группы</h2> <p><img src="images/2.jpg" alt="Учёные, находящиеся в состоянии аффекта" class="rightimg"> В наших секретных лабораториях в рамках проекта «Пандора» разрабатывалось психотропное оружие. В результате неудачного эксперимента большинство ученых, работавших над прибором, подверглись воздействию психотропного излучения, и они, находясь в состоянии аффекта, растащили прототип по деталям. Возможно, наши ученые до сих пор находятся в состоянии аффекта.</p> </body> </html>Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрациями
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет отступы между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
htmlbook.ru
Как сделать обтекание картинки текстом
С помощью свойства float можно выровнять изображение по левому (img {float: left; margin: 0 [x] [y] 0;}) или по правому (img {float: right; margin: 0 0 [x] [y];}) краю веб-страницы или блока-контейнера.
Чтобы картинка не сливалась с текстом, для нее добавляют соответствующие значения свойства margin.
Отменить обтекание следующего блока текста или заголовка можно при помощи конструкции h2, p {clear: left;} или h2, p {clear: right;}.
Также можно расположить изображение по центру страницы img {display: block; margin: 0 auto;}, или сделать обтекание картинки текстом с двух сторон, обернув каждый блок текста в отдельный абзац.
Разметка HTML
<h1>List of towns in England</h1> <h2>Amersham</h2> <p><img class="left" src="https://html5book.ru/wp-content/uploads/2015/02/Amersham.jpg">Amersham is ...</p> <h2>Buxton</h2> <p><img class="right" src="https://html5book.ru/wp-content/uploads/2015/02/Buxton.jpg">Buxton is ...</p> <h2>Chesterfield</h2> <p class="columns">Chesterfield is ...</p> <img class="img-center" src="https://html5book.ru/wp-content/uploads/2015/02/Chesterfield.jpg"> <p class="columns">It has ...</p> <h2>Dartmouth</h2> <p><img class="center" src="https://html5book.ru/wp-content/uploads/2015/02/Dartmouth.jpg">Dartmouth is ...</p>
CSS стили
body { margin: 0; background: #FFF8E8; padding: 0 20px; font-size: 90%; counter-reset: h2; /*создаем счетчик для любого заголовка h2*/ } h1 { font-family: 'Lora', serif; color: #564C4A; font-weight: 300; } h2 { font-family: 'Lora', serif; color: #B00D22; font-weight: 300; clear: both; /* отменяем обтекание с обеих сторон */ padding: 1em 0 0.25em; border-bottom: 2px solid; counter-increment: h2; /* задаем увеличение нумерации заголовков h2 на единицу */ } h2:before { content: " " counter(h2) '. '; /* добавляем в начале каждого заголовка текущее значение счетчика и точку с пробелом */ } p { font-family: arial; color: #785F5B; line-height: 1.3; } /********** картинка слева **********/ .left { float: left; margin: 0 1em 1em 0; } /********** картинка справа **********/ .right { float: right; margin: 0 0 1em 1em; } /********** картинка между текста **********/ .columns { float: left; max-width: 30%; margin: 0; } .img-center { float: left; margin: 0 1.5% 0 1.5%; max-width: 37%; } /********** картинка по центру********* */ .center { display: block; margin: 0 auto 1.5%; }
Обтекание картинки с двух сторон
Приём заключается в том, что текст помещается в два блока одинаковой ширины с небольшим промежутком посередине. С помощью псевдоэлементов :before и :before в каждый блок добавляется заглушка шириной в половину картинки и высотой, равной высоте картинки. Картинка абсолютно позиционируется таким образом, что закрывает собой эти пустые блоки, в результате чего и получается эффект обтекания с двух сторон.
Разметка HTML
<div class="wrap"> <img src="cat.jpg"> <div class="left"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> <div class="right"> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p> </div> </div>
CSS стили
.wrap { width: 60%; margin: 80px auto; position: relative; } img { position: absolute; top: 0; left: 50%; margin-left: -125px; } .left { float: left; width: 49%; } .right { float: right; width: 49%; } .left:before, .right:before { content: ""; width: 125px; height: 250px; } .left:before { float: right; } .right:before { float: left; }
html5book.ru
Теги html: обтекание картинки текстом
Картинки располагают на странице тремя способами:
- центральное положение;
- обтекание текстом;
- вставка в поле.
При большом размере картинку располагают посередине страницы, сначала поместив в контейнер < p > тега img, после чего для него устанавливают атрибут align=»center». Если часто используют изображение, следует применять стиль CSS к тегу < p >.
Когда изображение небольшое, рядом располагают текст. Способ является наиболее распространенным. Обтекание текстом делают несколькими способами. Но сначала картинку нужно вывести на экран. Если к ней известен путь, например, «foto1.jpg», ее вставляют на html страницу с помощью следующей записи:
< p>< img src =» foto1.jpg «>< /p>
Пример соответствует случаю, когда файлы html и рисунка находятся в одной папке.
Если за изображением следует текст, он будет располагаться ниже. Это не всегда удобно, поскольку по бокам будут оставаться пустые места, Поэтому страницу оформляют так, чтобы создать обтекание картинки текстом html. Для этого у тега img существует атрибут align, задающий расположение фото или рисунка относительно текста. От этого параметра зависит, с какого края страницы располагается графический материал и каким образом его обтекает текст. «>Атрибуту можно задавать следующие значения:
- left — перемещение картинки влево при обтекании текстом справа;
- right — обтекание изображения слева при его размещении справа;
- bottom — значение по умолчанию, когда картинка располагается слева, первая строка текста начинается на уровне нижней ее части;
- top — изображение размещается аналогично предыдущему значению, но первая строка расположена по его верхнему уровню;
- middle — начальная строчка текста проходит напротив середины изображения.
У тега img есть параметры, которыми можно задавать расстояние от текста до картинки (hspace и vspace). Без их применения текст будет располагаться к картинке вплотную. Кроме того, выбираются габаритные размеры рисунка width и height. При этом должна соблюдаться пропорция между шириной и высотой. Если габариты не задавать, по умолчанию рисунок переносится с размерами исходника, что не всегда удобно.
Перемещение изображения к левому краю с его обтеканием текстом можно сделать с помощью записи:
< p>< img src =» foto1.jpg » align=»left» width=150 height=100 hspace=5 vspace=5>Текст< /p>
Применение таблиц
Обтекание картинки текстом html легко делать с помощью таблицы, внутри ячейки которой помещается изображение. Здесь свойство align применяется для тега table. Таблицы имеют больше управляемых параметров, что создает для них преимущества:
< table width=170 height=120 border=0 align=left cellpadding=0 cellspacing=0 >
< img src= «foto2.jpg» width=150 height=100>
< /table >
Граница таблицы делается невидимой и не позволяет тексту приблизиться к изображению. Отступы между ячейками и внутри них могут регулироваться.
Использование стилей
Из предыдущих примеров видно, как просто сделать обтекание картинки текстом html. CSS позволяет достигнуть аналогичных результатов. Обтекание создают с помощью свойства float. Здесь также выравнивание обеспечивается значениями left и right.«>
Для этого создается класс и ему присваиваются стили CSS:
< style >
.fotoleft{
float:left;
margin: 5px 12px 3px 0px;
}
< /style >
Затем стилевое свойство float добавляется к селектору img:
< img src= «foto1.jpg» class=»fotoleft» >
Кроме выравнивания изображения с помощью значения left, здесь также устанавливаются отступы текста от картинки свойством margin. Аналогично делается обтекание текста слева, если применить свойство right.
Стили позволяют накладывать текст непосредственно на изображение. Для этого текст вставляется в блок с полупрозрачным фоном, который накладывается на картинку.
Делать эффектное обтекание текстом и его накладывание на изображения не так уж трудно, поскольку этого добиваются последовательными экспериментами.
«>
Обтекание изображений округлой формы текстом html
Веб-страницы состоят преимущественно из прямоугольных областей. Всем известно, как сделать обтекание картинки текстом в html. Стили применяют для создания геометрических фигур, но они не связаны с укладкой контента внутри или снаружи элементов. Можно рисунок разделить на 2 части и разместить с обеих сторон блоки отступов разной ширины. За ними сразу располагается текст.
Процесс создания подобного обтекания является трудоемким, и его надо делать отдельно для каждого нового рисунка.
Обтекание текстом сложных фигур
Путем разработки новой спецификации CSS Shapes удалось оказать влияние на существующий дизайн и предоставить ему новые перспективы. Теперь контент может обтекать сложные фигуры и криволинейные области.
Спецификация поддерживается браузером Chrome Canary, и сейчас пытаются реализовать ее на остальных. Она позволяет создавать сложные конструкции без помощи редакторов графики.«>
Обтекание круглой картинки текстом html обеспечивается с помощью следующей записи:
#circle
{
shape-outside: circle(-300px,-300px,300px); /* (x, y, radius) */
float:left;
}
< p>Пример текста< /p>
Код создает круг, идеально обтекаемый текстом.
Аналогично будет создаваться любая неправильная форма, благодаря поддержке Photoshop, который позволит получить CSS код фигуры.
Заключение
При построении макетов страниц с применением разных способов размещения на них изображений и текста можно создавать уникальный дизайн. Для этого необходимо освоить основные правила верстки, обеспечивающие обтекание картинки текстом html.
www.syl.ru