Как написать текст справа от картинки в html

Как сделать, чтобы текст был справа от картинки?

Как сделать, чтобы текст был справа от картинки на экранах <768px?

1. Первый вариант. Надо положить картинку и текст в один блок 1, картинке задать, например, float:left . Потом еще надо создать пустой блок 2 внутри блока 1 (или clearfix — ::after ), задать блоку 2 свойство clear:left .
2. Второй вариант. Положить картинку и текст в один блок 1, блоку 1 задать position:relative , картинке задать position:absolute; top:0px; left:0px; ,текст положить в параграф, параграфу задать margin-left , равный ширине картинки

Лучше всего всё переписать под нормальную блочную верстку с css display «table» :

А то блоки и параграфы в ссылке. включайте музыку поспокойнее когда программируете 🙂

Изображения в тексте

Иллюстрации всегда использовались для наглядного донесения до читателя нужной информации, для оформления страниц сайта и включения в текст различных графиков, диаграмм и схем. В общем, область применения изображений на сайтах достаточно велика. При этом используется несколько способов добавления рисунков в текст веб-страницы, которые и рассмотрены далее.

Рисунок по центру

Для выравнивания изображения по центру колонки текста, тег <img> помещается в контейнер <p> , для которого устанавливается атрибут align="center" . Но если предполагается активное использование иллюстраций, то лучше создать новый стилевой класс, назовем его fig , и применим его для нужных абзацев, как показано в примере 1.

Пример 1. Выравнивание рисунка по центру

В данном примере класс fig добавляется к селектору P , а способ выравнивания определяется свойством text-align . Положение рисунка относительно текста схематично показано на рис. 1.

Рис. 1. Рисунок в центре колонки текста

Обтекание рисунка текстом

Обтекание картинки текстом — один из популярных приемов верстки веб-страниц, когда изображение располагается по краю окна браузера, а текст обходит его с других сторон (рис. 2). Для создания обтекания изображения текстом существует несколько способов, связанных, как с возможностью тегов HTML, так и с применением стилей.

Рис. 2. Рисунок выровнен по левому краю и обтекается текстом справа

Так, у тега <img> есть атрибут align , который определяет выравнивание изображения. Этот атрибут задает, возле какого края окна будет располагаться рисунок, одновременно устанавливая и способ обтекания текста. Чтобы выровнять изображение по правому краю и задать обтекание слева, используют значение right , для выравнивания по левому краю применяют left . Атрибут align часто используют в связке с другими атрибутами тега <img> — vspace и hspace . Они определяют расстояние от обтекаемого текста до изображения. Без этих атрибутов изображение и текст будут слишком плотно прилегать друг к другу (пример 2).

Пример 2. Использование свойств тега <img>

Горизонтальный отступ от картинки до текста управляется атрибутом hspace , он добавляет пустое пространство одновременно слева и справа от изображения. Поэтому в данном примере рисунок не прилегает к краю окна, а отстоит от него на величину, указанную значением hspace .

Для обтекания картинки текстом также можно применить стилевое свойство float . Значение right будет выравнивать изображение по правому краю окна браузера, а текст заставляет обтекать рисунок слева (пример 3). Значение left , наоборот, выравнивает изображение по левому краю, а текст — справа от рисунка.

Пример 3. Использование стилей

В данном примере к тегу <img> добавляется класс fig , для которого установлено выравнивание по правому краю и, соответственно, обтекание картинки слева. Чтобы текст не прилегал плотно к изображению, применяются свойства padding-left и padding-bottom .

Рисунок на поле

При такой схеме изображение располагается справа или слева от текста, причем его обтекание происходит только с одной стороны. Фактически это напоминает две колонки, в одной из них находится рисунок, а в другой текст (рис. 3).

Рис. 3. Изображение размещается на поле слева от текста

Существует несколько методов достижения подобного результата. Рассмотрим два из них — использование таблицы и применение стилевого свойства margin .

Применение таблиц

Таблицы удобны тем, что позволяют легко создать структуру колонок с помощью ячеек. Потребуется таблица с тремя ячейками, в одной будет располагаться изображение, во второй текст, а третья нужна, чтобы создать отступ между ними. Можно также обойтись и двумя ячейками, а нужное расстояние задать через стили или с помощью атрибута width тега <td> . В примере 4 показано создание указанной таблицы.

Пример 4. Создание рисунка на поле с помощью таблиц

Результат примера показан на рис. 4.

Рис. 4. Изображение слева от текста

В данном примере ширина рисунка составляет 90 пикселов, а ширина колонки, где он располагается — 110 пикселов. Разница между ними и обеспечивает нужное расстояние от текста до картинки. Чтобы атрибуты таблицы cellspacing и cellpadding не вмешивались в процесс, их значения лучше обнулить. Обратите внимание, что в ячейках задается выравнивание по высоте.

Использование стилей

В данном случае потребуется два слоя, параметры которых будем изменять через CSS. Изображение поместим в слой с именем pic , а текст, сильно не мудрствуя, в слой text . Теперь для слоя piс следует установить свойство float со значением left , а для text — margin-left . Значение этого параметра равно ширине рисунка плюс необходимый отступ до текста (пример 5).

Пример 5. Использование margin

Свойство float в данном примере нужно, чтобы верхний край текста совпадал с верхним краем рисунка. Без этого свойства слой text опускается вниз на высоту изображения.

Если рисунок следует расположить справа от текста, то значение float меняем на right , а свойство margin-left на margin-right .

Картинки в HTML

Как всегда напоминаю, что есть замечательный видеокурс о вёрстке сайтов, в котором рассказывается в том числе о HTML и CSS:

Ранее я рассказывал о том, как вставить картинку в HTML-страницу. Если кто пропустил, то см. эту статью здесь.

Сегодня продолжу рассказывать о картинках — рассмотрим ещё некоторые полезные атрибуты тега <img> , а также “фишки” использования рисунков.

Обтекание рисунка текстом в HTML

Если большие картинки обычно вставляются между абзацами, то маленькие чаще вставляются в текст, то есть текст обтекает картинку. Однако если в HTML не принять дополнительных мер, то картинка будет вставлена в текст просто как “буква”, и текст будет продолжаться после картинки одной строкой. Соответственно, если рисунок имеет размер более одной строки, то между строками получится большое пустое пространство, что не очень красиво:

Для выравнивания картинки в тексте в теге <img> можно применить атрибут align . Выравнивание как раз и позволяет добиться обтекания картинки текстом.

Стандарты HTML определяют пять значений для атрибута align :

• left — выравнивание по левому краю
• right — выравнивание по правому краю
• top — выравнивание по верхнему краю
• bottom — выравнивание по нижнему краю (это значение по умолчанию)
• middle — выравнивание по середине

Если вы не используете атрибут align , то выполняется выравнивание картинки по нижнему краю (как на рисунке выше).

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

Итак, если вы хотите, чтобы текст обтекал картинку справа, то значение атрибута align должно быть равно left . Это немного странно, если думать о выравнивании текста. Но мы то выравниваем не текст, а картинку. Поэтому всё правильно — картинка будет слева, а текст — справа.

Пример выравнивания картинки по левому краю (обтекание текстом справа):

<img src=»https://info-master.su/programming/web/html/images-in-html.jpg» align=»left»>

А вот так примерно это будет выглядеть в браузере:

Рамка вокруг рисунка в HTML

Вообще этим пользуются редко, но иногда всё-же необходимо сделать рамку вокруг рисунка. Для этого можно использовать атрибут border . Делается это примерно так:

<img border=»5″ src=»https://info-master.su/programming/web/html/warning.png»>

Здесь мы обводим рисунок рамкой шириной 5 пикселей. По умолчанию цвет рамки будет чёрным. К сожалению, я не знаю простых способов изменить цвет рамки только средствами HTML, а в CSS и прочие прелести я погружаться не буду, так как мой рассказ про HTML.

Некоторые браузеры могут обводить рисунок рамкой по умолчанию, если атрибут border не указан. Поэтому, чтобы быть уверенным в том, что рамки вокруг рисунка не будет, лучше всегда использовать атрибут border с нулевым значением.

Атрибуты hspace и vspace

Итак, выравнивание рисунка в HTML теперь для вас сложности не представляет. Однако есть один неприятный вопрос — текст слишком близко прижат к картинке. Это не очень красиво смотрится.

Как же сделать отступы между текстом и картинкой? Для этого есть атрибуты hspace и vspace , которые задают отступы от горизонтального (справа и слева) и вертикального (сверху и снизу) края картинки соответственно. Пример:

В этом примере мы задаём отступы слева и справа по 50 пикселей, а сверху и снизу — по 10 пикселей. А в браузере это будет выглядеть примерно так:

Картинка в заголовке HTML

Иногда требуется вставить картинку в заголовок. Сделать это несложно. Например:

<h2><img src=»https://info-master.su/programming/web/html/warning.png» alt=». «> Очень важно</h2>

А выглядеть это будет примерно так:

И вообще картинки можно вставлять куда угодно — в таблицы, в списки и т.п.

О картинках много ещё чего можно рассказать. И я как-нибудь вернусь к этому вопросу. Но на сегодня всё.

А если хотите знать больше и прямо сейчас, то изучите курс о вёрстке сайтов.

HTML изображение и текст

Посмотрим, как разместить текст слева или справа изображения.

В предыдущем уроке мы рассмотрели метод вывода HTML изображения с расширением .jpg на web-страницу и то, как установить дополнительное расстояние между ним, и текстом. Продолжим наше знакомство с тегом <img /> и особенностями его взаимодействия с элементами текста.

Навигация по странице

1. Текст вверху, внизу, по центру изображения на HTML странице сайта
2. HTML изображение слева – текст справа
3. HTML изображение справа – текст слева

Текст вверху, внизу, по центру изображения

<html> <head> <title>HTML текст вверху, внизу, по центру изображения</title> </head> <body> <p><img src=»https://ab-w.net/images/2121.png» width=»128″ height=»128″ align=»top» />Текст вверху изображения</p> <p><img src=»https://ab-w.net/images/2121.png» width=»128″ height=»128″ align=»middle» /> Текст по центру изображения</p> <p><img src=»https://ab-w.net/images/2121.png» width=»128″ height=»128″ align=»bottom» /> Текст внизу изображения</p> </body> </html>

Атрибуты и значения

• align=»top» – выравнивает изображение и текст по верху.
• align=»middle» – выравнивает изображение и текст по центру, по вертикали.
• align=»bottom» – выравнивает изображение и текст по низу.

Н апомню, что для web применимы изображения трех форматов: PNG (.png), JPEG (.jpg) и GIF (.gif).

Обратите внимание на способ подгрузки изображения: ../images/2121.png . Во-первых, использован формат PNG (.png). Во-вторых, изображение находится в отдельной папке, то есть документ у меня в одной папке, а изображение в другой. В таких ситуациях очень важно правильно указать путь от документа к подгружаемой картинке, что и было сделано: первые две точки .. определяют выход из папки где находится документ (все уроки, они же страницы, они же документы курса по HTML у меня находятся в одной папке, CSS – в другой, изображения – в третьей и так далее); /images/ – не что иное, как название папки с изображениями, а 2121.png – полное имя файла самого изображения.

HTML изображение слева – текст справа

<html> <head> <title>HTML изображение слева – текст справа</title> </head> <body> <img src=»https://ab-w.net/images/2121.png» align=»left» width=»128″ height=»128″ /> <p>Изображение обтекает текст слева</p> <p>Изображение обтекает текст слева</p> <p>Изображение обтекает текст слева</p> <p>Изображение обтекает текст слева</p> </body> </html>

HTML изображение справа – текст слева

<html> <head> <title>HTML изображение справа – текст слева</title> </head> <body> <img src=»https://ab-w.net/images/2121.png» align=»right» width=»128″ height=»128″ /> <p>Изображение обтекает текст справа</p> <p>Изображение обтекает текст справа Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа. Изображение обтекает текст справа</p> </body> </html>

Автор проекта — Вася Митин | Дата публикации: Октябрь 2009 | Обновление: Ноябрь 2018

HTML изображение HTML изображение, текст HTML верстка сайта