Перед началом
Задайте рисунку реальные width/height и содержательный alt. Сначала проверьте обычный порядок документа без CSS: изображение и поясняющий текст должны идти логично.
Текстовое объяснение схемы
Широкий экран: float → Обёртка: flow-root → Телефон: отдельный блок. Иллюстрация шириной 220 px плюс отступ 24 px оставляет в колонке 700 px ещё 456 px для строк. На экране 360 px такое обтекание оставит слишком узкий текст, поэтому картинка становится отдельным блоком.
Как сделать
- В широком макете задайте float: left, ограниченную ширину и margin справа и снизу. Не оставляйте изображение шире текстового блока.
- Создайте flow-root у обёртки, чтобы плавающий рисунок не выходил в следующий раздел. Для узкого экрана снимите float и разрешите картинке занять доступную ширину.
- Проверьте короткий абзац, длинный заголовок и увеличение текста. Следующий раздел не должен неожиданно прилипать к картинке.
.story { display: flow-root; }
.story img { float: left; width: 220px; max-width: 100%; margin: 0 24px 16px 0; }
@media (max-width: 600px) { .story img { float: none; margin: 0 0 16px; } }Разберём пример
Иллюстрация шириной 220 px плюс отступ 24 px оставляет в колонке 700 px ещё 456 px для строк. На экране 360 px такое обтекание оставит слишком узкий текст, поэтому картинка становится отдельным блоком.
Проверьте результат
Нет узких полос из одного слова, горизонтальной прокрутки и пересечения со следующим заголовком. Чтение с клавиатуры и без CSS остаётся последовательным.
Где легко ошибиться
Фиксированная ширина картинки вместе с большими margin может превысить экран. max-width не отменяет внешние отступы автоматически.
Источники и продолжение
- MDN — float
- Как окружить фото текстом и задать отступы текста от картинки — 2009-12-26 (RU)
Схема и примеры: редакция Web Article. Схема объясняет принцип и не является снимком интерфейса или результатом испытания программы.