Как сделать обтекание картинки текстом?
Обтекание картинки текстом обычно используется для компактного размещения материала и связывания между собой иллюстраций и текста. Само обтекание создаётся с помощью стилевого свойства float, добавляемого к селектору img. Значение left выравнивает изображение по левому краю, right — по правому. Обтекание при этом происходит по другим, свободным сторонам.
В примере 1 введены два стилевых класса leftimg и rightimg, при добавлении их к <img> картинка выравнивается по соответствующей стороне, а текст при этом обтекает картинку.
Пример 1. Обтекание картинок
Результат данного примера показан на рис. 1.
Рис. 1. Текст с иллюстрациями
Использование свойства float заставляет текст плотно прилегать к изображению. Поэтому в примере введёно универсальное свойство margin, которое добавляет пространство между картинкой и текстом. Это свойство одновременно задаёт отступ сверху, справа, снизу и слева от фотографий.
См. также
- float
- float в CSS
- margin
- margin в CSS
- Абсолютное позиционирование
- Блочные элементы
- Буквица
- Влияние float
- Выравнивание картинок
- Выравнивание с помощью флексбоксов
- Колесо для сокращённых свойств
- Описание float
- Открываем блочную модель
- Подробнее о позиционировании
- Поток
- Примеры использования float
- Свойство margin
- Строчные элементы
- Схлопывающиеся margin