Как с float перейти на flex?

Question

[Andry]

Простые блоки с тремы элементами, где картинка прижата в угол через float.


Хочу переделать на flex. Не могу придумать решения, чтобы оставшееся время было поднималось выше нижнего края иконки, если есть для него место.

Задачка с звездочкой - добавить в правый-верхний угол крестик-отмену. Сейчас тоже флоатом сделан.

Answer 1

[Сергей delphinpro]

Делаем макет из двух колонок и двух столбиков. Картинку размещаем в первой колонке на две строки. Стили для выравнивания - по вкусу, сами.

.el {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
}
.img {
  grid-row: span 2;
}
.time {
  text-align: right;
}

задача со звездочкой *

.el {
  position: relative;
}
.cancel {
  position: absolute;
  right: 0;
  top: 0;
}

Comments

[Andry]

Спасибо. Не подумал про сетку.
Лучше, чем наворачивать обертки с флексом. Но и один-к-одному поведение не получается - картинка занимает всю колонку и заголовок на три строки не обтекает картинку . Все же у float еще осталась своя ниша в верстке.