Для тех, кто любит конкурсы разработчиков.
Вы приходите домой, а там Кодзима проводит конкурс разработчиков «Яндекс-блиц».
Условие
Представьте, что вы работаете в Яндексе и верстаете баннеры для рекламной системы «Директ». Вы получили задание доработать шаблон баннера:
Недавно разработчики бэкенда изменили формат данных, которые приходят с сервера. Максимальный размер заголовка увеличился на несколько символов, и теперь длинные заголовки не помещаются в отведённое для них место между левой границей баннера и кнопкой «Перейти».
Дизайнер решил перенести кнопку в правый нижний угол баннера.
Исправьте шаблон баннера, чтобы он соответствовал новому макету. Нужно, чтобы текст обтекал кнопку слева и сверху. Текст баннера подставляется в шаблон динамически и может быть любым. У баннера всегда одинаковый размер. В шаблоне можно использовать только HTML и CSS. Использовать JavaScript и картинки нельзя.
Решение
В подобных задачах нужно внимательно перечитывать условие — оно даёт подсказку к решению или задаёт ход мыслей. Перечитываем и выделяем следующие моменты:
- У баннера фиксированный размер, поэтому и у кнопки, скорее всего, будет постоянная высота.
- Текст баннера обтекаемый, поэтому используем свойство float — точнее, float: right из-за левостороннего обтекания.
- Нужно зафиксировать кнопку внизу и сделать так, чтобы у текста баннера был любой размер — это возможно, если сверстать кнопку перед блоком с текстом.
Теперь нужно подумать, как прибить кнопку к нижней границе баннера. Для этого подходят свойства margin, transform или «абсолютное позиционирование». Однако если мы применим margin, то у нас не сработает обтекание сверху. Если добавить transform, то это не повлияет на макет и соседние элементы. «Абсолютное позиционирование» вообще выбьет блок из потока, и это нам точно не нужно.
Перечитываем условие и вспоминаем, что у баннера и кнопки фиксированная высота. Это означает, что для верхней внутренней границы баннера мы можем использовать элемент padding-top со значением (`<высота баннера> − <высота кнопки>`) — так мы сдвинем кнопку.
Проблема теперь в том, что у нас сдвинулась и кнопка, и текст. Чтобы это исправить, используем свойство margin-top, которое умеет принимать отрицательное значение и сдвигать элементы в обратную сторону. Добавляем к тексту margin-top с тем же значением, что и padding-top у баннера, — наш текст возвращается на место и сохраняет обтекание кнопки. Готово, задача решена:
Итоговый код
У этой задачи два решения. Мы рассмотрели первый вариант, который использовал Давид Роганов — фронтенд-разработчик из Яндекс.Практикума, который в 2018 году решал эту конкурсную задачу. Второй вариант вы можете предложить в комментариях.