Как разместить картинку справа от текста в 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» :

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

Картинки в 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>

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

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

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

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