Как сделать, чтобы текст был справа от картинки?
Как сделать, чтобы текст был справа от картинки на экранах <768px?
- Первый вариант. Надо положить картинку и текст в один блок 1, картинке задать, например, float:left . Потом еще надо создать пустой блок 2 внутри блока 1 (или clearfix — ::after ), задать блоку 2 свойство clear:left .
- Второй вариант. Положить картинку и текст в один блок 1, блоку 1 задать position:relative , картинке задать position:absolute; top:0px; left:0px; ,текст положить в параграф, параграфу задать margin-left , равный ширине картинки
Лучше всего всё переписать под нормальную блочную верстку с css display «table» :
А то блоки и параграфы в ссылке. включайте музыку поспокойнее когда программируете 🙂
Делаем обтекание картинки текстом на HTML и CSS
Правильное и красивое размещение всех объектов на странице — неотъемлемый элемент дизайна любого уважающего себя сайта. Как всегда, здесь не обойтись без CSS. Дело в том, что обтекание картинки текстом HTML сам по себе делает (с помощью атрибутов align=left, align=right тега img), но он при этом не создает отступов. Потому без CSS все-таки не обойтись.
Общее решение задачи
CSS? Я знаю несколько способов, с помощью которых можно решить поставленную задачу.
Так, например, можно картинку заключить в тег DIV, которому через CSS задать свойство float:left или float:right, с проставлением необходимых отступов.
Но этот способ я бы не назвал самым корректным — зачем включать в документ лишний тег, если вопрос можно решить исключительно в рамках тега IMG?
Делается это с помощью присвоения все тех же самых свойств — float, отвечающего за выравнивание, и margin, отвечающего за отступы.
Для начала присвоим нашему изображению класс:
Теперь пропишем соответствующие свойства в CSS — предположим, что у нас картинка будет стоять слева:
[css]
.img_class <
float: left;
margin: 10px 10px 10px 0;
>
[/css]
Свойство margin требуется для того, чтобы задать отступы текста от картинки — иначе он вплотную к ней прижмется, что будет не очень красиво. При этом мы задаем их сверху, справа и снизу, а левый отступ ставим равным нулю — так как само изображение будет находиться слева.
Массовое применение для всех изображений
Если требуется, чтобы все изображения в документе выравнивались по левому краю, тогда этот вопрос можно решить сразу на уровне того блока (элемента) страницы, в котором они находятся — чтобы не прописывать каждый раз class для изображения. Даже небольшая экономия трафика того стоит.
Предположим, что картинки находятся в посте, который на странице вашего сайта показывается в <div >
В таком случае в CSS файле вашего сайта будет достаточно прописать следующий код:
[css]
.content img <
float: left;
margin: 10px 10px 10px 0;
>
[/css]
Теперь все изображения, находящиеся в блоке «content», будут выравниваться слева и иметь вышеуказанные отступы. Если для какого-то отдельного изображения вы захотите сделать исключение — например, расположить его справа, то для него будет нужно задать id (например, и в css файле прописать такие параметры (должны начинаться со знака решетки — #):
[css]
#my_img <
float: right;
margin: 10px 0 10px 10px;
>
[/css]
Накладываем текст на изображение
Порой необходимо, чтобы текст был написан прямо на изображении — например, часто бывает красиво, если сделать большую картинку к статье, а на ней написать название статьи или какую-то аннотацию.
Опять-таки, сделать это можно множеством способов. Приведу два наиболее популярных.
Во-первых, можно создать блок, в котором будет написан текст, а изображение будет выступать фоном для этого блока:
[html]
<div который будет наложен на картинку</div>
[/html]
[css]
.my_block <
background: url (my_img.jpg) top left no-repeat;
width: 500px;
height: 300px;
padding: 400px 0 0 0;
>
[/css]
В этом блоке строка с текстом разместится в нижней части блока — с верхним отступом в 400 пикселей.
Данный метод особенно хорошо подходит для элементов дизайна (шапка, логотип сайта), в которых уже заранее известен и размер изображения, и текст, который будет написан.
Другой метод — это создать два блока (один — с картинкой, другой — с текстом), и поместить один «сверху» другого в соответствии с заданными параметрами. Большой плюс этого метода состоит в том, что у блока с текстом можно задать фон (в том числе и полупрозрачность):
Картинки в 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 и CSS
Сегодня изображения используются в интернете практически повсеместно. Невозможно себе представить веб страницу на которой нет изображения. Картинки привлекают внимание, улучшают внешний вид и восприятие текста. Поэтому в данном уроке мы научимся позиционировать изображения по отношению к тексту и рассмотрим как сделать обтекание картинки текстом в 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 слева от изображения.
Добавив к данным стилям рамку и внутренний отступ можно придать изображению некий эффект фотографии с белыми краями: