Как сделать текст справа от картинки в HTML

Чтобы разместить картинку слева, а текст справа в HTML, используйте CSS-свойство float: left или контейнер с display: flex. Float дает обтекание внутри статьи, flexbox – отдельные колонки. Для подписи добавьте figure и figcaption, а для узкого экрана задайте медиазапрос.

Как добавить картинку перед текстом в HTML

Начните с изображения внутри абзаца. Укажите понятный текст в атрибуте alt, чтобы описать содержимое картинки.

<p>
  <img src="images/headshot-picture.jpg" alt="Портрет автора статьи" />
  Текст абзаца. Автор рассказывает о своей работе, любимых проектах и занятиях.
</p>

Тег <img> по умолчанию ведет себя как строчный заменяемый элемент. Браузер ставит его рядом с текстом, если в строке хватает места.

При нехватке ширины текст переносится на следующую строку.

Для учебного примера создайте файл index.html с таким каркасом. Разметку абзаца вставьте между тегами <body> и </body>. Правила CSS помещайте внутри <style>, заменяя комментарий.

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Картинка слева от текста</title>
  <style>
    /* Поместите сюда CSS выбранного примера. */
  </style>
</head>
<body>
  <!-- Поместите сюда HTML выбранного примера. -->
</body>
</html>

Положите рядом папку images и поместите в нее файл headshot-picture.jpg. Откройте HTML-файл в браузере. Без CSS изображение и текст останутся в обычном потоке документа.

Как настроить обтекание картинки через float с clearfix

Свойство float прижимает картинку к левому краю. Строки текста занимают свободное место справа, а после нижнего края изображения идут по всей ширине блока.

<div class="clearfix">
  <p>
    <img src="images/headshot-picture.jpg" alt="Портрет автора статьи" class="left" />
    Автор рассказывает о своей работе, любимых проектах и занятиях.
    Добавьте еще несколько предложений, чтобы увидеть обтекание фотографии текстом.
  </p>
</div>

.left {
  float: left;
  width: 160px;
  max-width: 100%;
  height: auto;
  margin: 0 20px 20px 0;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

Свойство width задает ширину фотографии, а height: auto сохраняет пропорции. Отступ справа отделяет текст от картинки.

Плавающий элемент выпадает из обычного потока.

При коротком тексте родительский контейнер может оказаться ниже высоты изображения. Clearfix заставляет контейнер охватить плавающую картинку по высоте.

Псевдоэлемент .clearfix::after очищает обтекание. Следующий блок начинается после изображения и текста.

1. Вставьте HTML примера внутрь <body> в файле index.html, заменив предыдущий абзац.
2. Поместите CSS примера между <style> и </style> внутри <head>.
3. Положите фотографию в папку images рядом с файлом или замените путь в src.
4. Сохраните index.html.
5. Откройте файл в браузере. На широком окне текст появится справа от изображения.

Если фотография не загрузилась, сравните имя файла и путь в src. Короткий абзац покажет работу clearfix: следующий блок останется под изображением.

Чтобы вернуть обычное расположение без обтекания, удалите добавленные правила CSS.

Класс left можно переименовать вместе с CSS-селектором. Атрибут align у <img> устарел, поэтому для выравнивания используйте CSS.

Как выбрать селектор для изображения

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

<div class="main-content clearfix">
  <p>
    <img src="images/headshot-picture.jpg" alt="Портрет автора статьи" />
    Текст об авторе фотографии. Добавьте несколько предложений,
    чтобы увидеть обтекание изображения строками абзаца.
  </p>
</div>

.main-content img {
  float: left;
  width: 160px;
  max-width: 100%;
  height: auto;
  margin: 0 20px 20px 0;
}

Селектор .main-content img применяет правило ко всем изображениям внутри контейнера.

Берите его, если одинаковое оформление подходит каждой картинке. Правило .clearfix::after оставьте в таблице стилей.

Для повторяющихся правил храните CSS в отдельном файле. Так структура страницы и стили остаются раздельными, а медиазапрос проще изменить.

Как картинка с float ведет себя на узком экране

Плавающая фотография оставляет тексту только свободное место справа. При ширине окна 320 пикселей картинка шириной 160 пикселей и отступом 20 пикселей занимают 180 пикселей.

Большая картинка может оставить тексту слишком узкую полосу.

Если слово не помещается рядом с фотографией, браузер переносит его ниже. После нижнего края картинки строки снова занимают всю ширину блока.

Ограничьте ширину фотографии значением max-width: 100%. Тогда изображение не станет шире своего контейнера. Для маленьких экранов отключите обтекание и поставьте изображение над текстом.

@media (max-width: 600px) {
  .left {
    float: none;
    display: block;
    margin: 0 auto 20px;
  }
}

При ширине окна до 600 пикселей фотография станет блочным элементом и окажется над текстом абзаца. Значение auto в боковых отступах выровняет ее по центру.

Если вы используете .main-content img, примените медиазапрос к этому селектору.

Порог 600 пикселей служит примером для макета с фотографией шириной 160 пикселей.

1. Добавьте медиазапрос в конец блока <style>, перед </style>.
2. Сохраните файл.
3. Обновите страницу в браузере.
4. Уменьшите окно до 375 пикселей.
5. Расширьте окно до 800 пикселей.

На ширине 375 пикселей картинка должна стоять над текстом, а на ширине 800 пикселей текст снова должен идти справа. Чтобы отключить это переключение, удалите медиазапрос.

Как расположить картинку и текст в колонках через flexbox

Flexbox создает две самостоятельные области. Изображение занимает первую колонку, а текстовая часть – вторую.

<div class="profile">
  <img src="images/headshot-picture.jpg" alt="Портрет автора статьи" class="profile__image" />
  <div class="profile__text">
    <p>Автор рассказывает о своей работе и любимых проектах.</p>
    <p>Описание занимает отдельную колонку справа от фотографии.</p>
  </div>
</div>

.profile {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.profile__image {
  display: block;
  flex: 0 0 auto;
  width: 160px;
  max-width: 100%;
  height: auto;
}

.profile__text {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.profile__text p:first-child {
  margin-top: 0;
}

@media (max-width: 600px) {
  .profile {
    flex-direction: column;
  }
}

Свойство gap задает расстояние 20 пикселей между колонками.

Значение flex: 0 0 auto запрещает растягивать и сжимать фотографию вдоль основной оси. В горизонтальной раскладке ее ширина остается равной 160 пикселям.

Добавьте текстовой колонке min-width: 0, чтобы снять минимальное ограничение по содержимому. Правило overflow-wrap: anywhere разрешает переносы внутри длинных слов и адресов.

В широком окне изображение появится слева, а текст займет отдельную колонку справа. При ширине до 600 пикселей элементы выстроятся вертикально.

Flexbox не требует clearfix, потому что контейнер учитывает высоту своих дочерних элементов.

Такой вариант подходит для карточки автора, товара или блока с описанием.

Как добавить подпись к изображению через figure

Элемент <figure> объединяет изображение с самостоятельной подписью <figcaption>. Float можно применить ко всему блоку, включая подпись.

<div class="clearfix">
  <figure class="photo">
    <img src="images/headshot-picture.jpg" alt="Портрет автора статьи" />
    <figcaption>Автор статьи в своей мастерской</figcaption>
  </figure>
  <p>Автор рассказывает о своей работе, любимых проектах и занятиях.
  Текст обтекает фотографию вместе с подписью.</p>
</div>

.photo {
  float: left;
  width: 160px;
  max-width: 100%;
  margin: 0 20px 20px 0;
}

.photo img {
  display: block;
  width: 100%;
  height: auto;
}

.photo figcaption {
  margin-top: 8px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

@media (max-width: 600px) {
  .photo {
    float: none;
    margin: 0 auto 20px;
  }
}

Ширина figure ограничивает фотографию и подпись. На широком экране текст начинается справа от всего блока.

На узком экране медиазапрос ставит figure над описанием.

Подпись остается связанной с изображением и не отделяется от него при переносе. Размещайте ее внутри figcaption.

Не вкладывайте figure в абзац, потому что этот элемент формирует самостоятельный структурный блок.

Как добавить figure в flexbox-разметку

Flexbox сохраняет подпись внутри первой колонки. В этом варианте положение блока задает родительский контейнер.

<div class="profile">
  <figure class="profile__figure">
    <img src="images/headshot-picture.jpg" alt="Портрет автора статьи" />
    <figcaption>Автор статьи в своей мастерской</figcaption>
  </figure>
  <div class="profile__text">
    <p>Автор рассказывает о своей работе и любимых проектах.</p>
    <p>Описание занимает вторую колонку.</p>
  </div>
</div>

.profile__figure {
  flex: 0 0 auto;
  width: 160px;
  max-width: 100%;
  margin: 0;
}

.profile__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.profile__figure figcaption {
  margin-top: 8px;
  font-size: 14px;
  overflow-wrap: anywhere;
}

Стили .profile, .profile__text и медиазапрос из flexbox-примера оставьте без изменений. На узком экране контейнер выстроит figure и текст друг под другом.

У непосредственного дочернего элемента flex-контейнера свойство float не влияет на раскладку.

Для figure используйте отдельный класс profile__figure.

Какой вариант расположения картинки выбрать

Выбирайте способ по поведению текста и наличию подписи. Обтекание подходит для статьи, а flexbox дает стабильные колонки.

Берите float для журнального обтекания внутри статьи. Выбирайте flexbox для карточки с независимой колонкой текста.

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

Совет от нашей редакции: проверьте макет на длинном тексте и ширине 375 пикселей. Короткий абзац не покажет проблем с обтеканием.