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

Выравнивание картинки по левому краю страницы, в то время как текст обтекает его, будет довольно распространенным решением. В веб этот эффект известен как «смещение» картинки. Подобный стиль реализуется при помощи 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, значительно усложнит создание медиа-запросов, которые могут корректировать внешний вид веб-сайта по мере необходимости.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *