Как разместить изображение на веб-странице слева от текста

Выравнивание изображения по левому краю страницы, в то время как текст обтекает его, является довольно распространенным решением. В веб этот эффект известен как «смещение» изображения. Подобный стиль реализуется с помощью CSS-свойства float left, которое задает обтекание текстом выровненного по левому краю изображения.

Начинаем с HTML

Для нашего примера мы создадим абзац текста и добавим в начале изображение (перед текстом, но после открывающегося тега <p>). Вот как выглядит HTML-разметка:

<p>
<img src="images/headshot-picture.jpg" alt="Снимок лица" />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
</p>

По умолчанию веб-страница будет отображаться с изображением над текстом. Это связано с тем, что в HTML изображения являются блочными элементами. Это значит, что браузер отображает разрывы строки до и после изображения. Мы изменим это поведение по умолчанию с помощью CSS. Но сначала добавим к нашему элементу изображения значение класса:

<p>
<img src="images/headshot-picture.jpg" alt="Снимок лица" class="left" />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
</p>

Стили CSS

Включив в HTML-код атрибут класса «left», можно перейти к vertical align central float left. Мы добавим в таблицу стилей правило, которое задаст смещение изображения. А также несколько дополнительных правил, которые обеспечат, чтобы текст не прилегал к изображению вплотную, обтекая его.

Вот CSS-код:

.left {
   float: left;
   padding: 0 20px 20px 0;
}

Этот код смещает изображение влево и добавляет небольшие отступы справа и снизу от изображения.

Если просмотреть в браузере страницу, то изображение в ней будет выровнено по левому краю, а текст абзаца будет отображаться справа от него с соответствующим отступом. Одно замечание относительно значения класса "left", которое мы использовали. Имейте в виду, что это значение является произвольным. Мы могли бы назвать класс как угодно, а термин "left" сам по себе ничего не делает.

Нам просто нужно задать атрибут класса в HTML, который связан с фактическим стилем CSS float left, а он уже определяет визуальные изменения, которые необходимо произвести.

Альтернативные способы

Подход, при котором мы задаем для изображения атрибут класса, а затем используем общий стиль CSS, который смещает элемент, это только один способ «выравнивания по левому краю». Также можно убрать значение класса и создать эффект, написав более конкретный селектор. Рассмотрим пример, в котором изображение находится внутри раздела со значением класса "main-content":

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

Задать стили для изображения можно с помощью следующего кода CSS:

.main-content img {
   float: left;
   padding: 0 20px 20px 0;
}

Изображение будет выровнено по левому краю, текст будет обтекать его, как и раньше, но нам не нужно добавлять дополнительное значение класса в разметку. Этот способ выравнивания float left по центру позволит создать меньший HTML-файл, что повысит производительность.

Также можно добавить стили непосредственно в HTML-разметку, например:

<p>
  <img src="images/headshot-picture.jpg" alt="Headshot photo" style="float:left;margin:0 20px 20px 0;"   />
Текст абзаца. В этом примере у нас есть снимок лица человека, таким образом текст абзаца, скорее всего, будет рассказывать о человеке, чья голова изображена на снимке.
  </p>

Этот метод style float left не является рекомендованным, так как при его использовании стили смешиваются с разметкой, то есть со структурой.

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

Перевод статьи «How To Float an Image to the Left of Text on a Webpage» дружной командой проекта Сайтостроение от А до Я.

06 марта 2017 в 15:28
Материалы по теме
{"url":"http://www.fastvps.ru/", "src":"/images/advbanners/fastvps.png", "alt":"Хостинг Fastvps.ru. Наш выбор!"}
Заработок