Как заверстать текст вокруг изображения в HTML
Заверстывание текста вокруг изображений — отличный способ сделать макет веб-сайта визуально привлекательнее. Пройдем шаг за шагом процесс создания этого эффекта, проиллюстрировав его четкими примерами и пояснениями. К концу вы будете знать, как именно расположить текст вокруг изображений, придавая им более привлекательный вид.
Заверстывание текста вокруг изображения
Вставляемое в HTML изображение часто остается одним, а текст находится по умолчанию над ним или под ним. Заверстыванием текста вокруг изображения текст как бы растекается по изображению, благодаря чему оптимальнее используется пространство и контенту придается профессиональный вид.
Использование базовых HTML и CSS для заверстывания текста вокруг изображения
Начнем с простейшего способа заверстать текст вокруг изображения — с базовыми HTML и CSS. Вот пример:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wrap Text Around Image</title>
<style>
/* Стиль для заверстываемого текстом изображения */
.wrap-image {
float: left; /* Изображение помещается слева */
margin: 0 15px 15px 0; /* Вокруг изображения добавляется пространство */
}
</style>
</head>
<body>
<h1>Wrapping Text Around an Image</h1>
<img src="example.jpg" alt="A beautiful landscape" class="wrap-image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam bibendum sit amet purus sit amet egestas. Duis faucibus massa eget urna gravida, at malesuada neque condimentum.</p>
<p>Aliquam erat volutpat. In vehicula, lorem nec lacinia tristique, arcu nunc accumsan risus, a auctor lectus neque eu eros.</p>
</body>
</html>
Пояснения к коду
— Свойство Float: благодаря ему в CSS текст заверстывается вокруг изображения. Заданием float: left; браузеру указывается разместить изображение слева от текста. Как итог — весь следующий текст располагается справа от изображения.
— Свойство Margin: добавлением margin: 0 15px 15px 0; вокруг создается пространство, чтобы текст не соприкасался с изображением. Этим margin обозначается четыре стороны: верхняя, правая, нижняя и левая. А в виде 15px справа и внизу создается удобный буфер, которым изображение визуально отделяется от текста.
Параметры float для контроля расположения изображений
В примере выше изображение разместили слева при помощи float: left;. Чтобы заверстать текст вокруг изображения справа, просто меняем свойство float на float: right;.
Вот пример с изображением справа:
<style>
.wrap-image {
float: right; /* Изображение располагается справа */
margin: 0 0 15px 15px; /* Вокруг изображения добавляется пространство */
}
</style>
На этот раз в margin задали 0 0 15px 15px, то есть на изображении добавится пространство снизу и слева. Так текст плавно растекается слева, не приближаясь слишком близко к изображению.
Очистка значений float для оптимального макета страницы
Свойство float иногда чревато проблемами расположения, если под заверстанным текстом и изображением находится другой контент. Избавляются от этих проблем применением свойства clear после элемента, в котором использовано свойство float. Так под ним гарантированно начнется следующий раздел.
Вот как это делается:
<p class="clear">This paragraph will start below the image, not next to it.</p>
<style>
.clear {
clear: both; /* Контент перемещается под элементы, в которых использовано свойство «float» */
}
</style>
Заданием clear: both; обеспечивается, что перемещаемое таким образом изображение не скажется на других элементах, например следующем абзаце.
Пример: заверстывание текста вокруг нескольких изображений
Теперь заверстаем текст вокруг нескольких изображений на одной странице. Воспользуемся тем же классом с float: left; или float: right;, не забывая добавить достаточное пространство вокруг каждого изображения, чтобы текст ими не перекрывался.
<img src="image1.jpg" alt="Image 1" class="wrap-image">
<p>Text that wraps around the first image on the left side. The margin creates a space between the image and text, making it easier to read.</p>
<img src="image2.jpg" alt="Image 2" class="wrap-image-right">
<p>Text that wraps around the second image, which is aligned to the right. Each image has its own space and doesn’t interfere with the other’s text.</p>
<style>
.wrap-image {
float: left;
margin: 0 15px 15px 0;
}
.wrap-image-right {
float: right;
margin: 0 0 15px 15px;
}
</style>
В этом примере благодаря классу .wrap-image-right второе изображение располагается в правой части, а текст — слева от него.
Адаптивное заверстывание изображений с Flexbox
Эти float хороши для простого дизайна, но не всегда адаптируются к мобильным устройствам. Современный подход заключается в использовании Flexbox, с которым упрощается управление макетами, особенно для адаптивного дизайна.
Вот как заверстывается текст вокруг изображения с помощью Flexbox:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Text Wrap with Flexbox</title>
<style>
.flex-wrap {
display: flex; /* Активируется макет «flex» */
align-items: flex-start; /* Элементы выравниваются по верхнему краю */
gap: 15px; /* Добавляется пространство между элементами */
}
.flex-wrap img {
max-width: 40%; /* Ради гибкости ограничивается ширина изображения */
height: auto; /* Поддерживается соотношение высоты и ширины */
}
.flex-wrap p {
flex: 1; /* Остальное пространство занимается абзацем */
}
</style>
</head>
<body>
<h2>Using Flexbox for Text Wrapping</h2>
<div class="flex-wrap">
<img src="example.jpg" alt="Flexbox example image">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin vulputate, arcu ut laoreet suscipit, est nunc vehicula leo, id aliquet sapien libero at urna. In luctus, orci id euismod ultrices, augue lacus fermentum sem, non dignissim risus magna ut eros.</p>
</div>
</body>
</html>
Пояснения к коду
— Свойством display: flex; задается контейнер flex, которым контролируется расположение дочерних элементов.
— В свойстве align-items: flex-start; выравниванием элементов поверху текст начинается в верхней части изображения, от этого выравнивание становится четче.
— В свойстве gap добавляется промежуток в 15px между элементами контейнера flex, благодаря чему текст располагается не слишком близко к изображению.
— Благодаря свойству flex: 1; текстом занимается остальное пространство внутри контейнера flex, и этот текст естественным образом растекается по изображению.
Практический сценарий: заверстывание текста вокруг изображений в макете блога
Возьмем макет блога и заверстаем текст вокруг изображений статей, придав фрагменту каждой статьи четкий, профессиональный вид:
<div class="blog-wrap">
<img src="thumbnail.jpg" alt="Blog thumbnail" class="wrap-thumbnail">
<p><strong>Article Title</strong></p>
<p>A short preview of the blog content. The text flows around the image for a cohesive and appealing layout that keeps readers engaged.</p>
</div>
<style>
.blog-wrap {
display: flex;
align-items: center;
margin-bottom: 20px; /* Пространство между статьями */
}
.wrap-thumbnail {
max-width: 100px;
margin-right: 15px;
}
</style>
Пояснение
Flexbox для макета блога — простой способ выровнять изображение рядом с текстом. Этот более адаптивный подход хорош на разных размерах экрана.
Контроль размера изображения: параметром max-width: 100px; поддерживается приемлемый размер изображения, так что оно не занимает весь макет.
Заключение
Заверстыванием текста вокруг изображений веб-сайт делается визуально привлекательнее. Независимо от того, используете вы float, Flexbox или их вместе, полный контроль над взаимодействием изображений с окружающим текстом вам обеспечен. Чтобы между изображениями и текстом было достаточно пространства для работы с ними на разных устройствах, не забудьте настроить поля и использовать четкие стили CSS.
Читайте также:
- 21 рекомендация по HTML
- Как работать с <qr-code> — настраиваемым элементом HTML с возможностью анимации
- Создание приложения для отслеживания фильмов с помощью HTML, CSS и JavaScript
Читайте нас в Telegram, VK и Дзен
Перевод статьи ryan: Wrap Text Around an Image in HTML: Complete Guide
