Перед початком
Задайте справжні width/height і змістовний alt. Перевірте порядок без CSS: зображення та пояснення мають іти логічно.
Текстове пояснення схеми
Широкий екран: float → Обгортка: flow-root → Телефон: окремий блок. Ілюстрація 220 px і проміжок 24 px залишають у колонці 700 px ще 456 px для рядків. На екрані 360 px це буде надто вузько, тому картинка стає окремим блоком.
Як зробити
- У широкому макеті задайте float: left, обмежену ширину та відступи праворуч і знизу. Картинка не повинна бути ширшою за текстовий контейнер.
- Додайте обгортці display: 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. Схема пояснює принцип і не є знімком інтерфейсу або результатом випробування програми.