UnluckySerivelha
@UnluckySerivelha

Как лучше сверстать блоки с отступом сверху в 50% от своей высоты?

Нужно сверстать строки с блоками, где каждый следующий блок будет ниже предыдущего на 50% от своей высоты, то есть должно получиться так:
5b7aec7072ffc191794532.jpeg
Сделал с помощью transform: translateY(50%) для второго блока и transform: translateY(100%) для третьего, но в таком случае высота строки с блоками равна высоте только одного блока (видно по фону строки: codepen)
Хотел с помощью margin-top: 50%, но margin считается от высоты родителя и это не работает.
Также вижу вариант с установкой margin-top равным половине высоты блока с помощью JS, но может есть другой способ на CSS организовать?
Спасибо
  • Вопрос задан
  • 122 просмотра
Пригласить эксперта
Ответы на вопрос 1
Можно сделать их в виде колон, сделать контейнер флексовым и элементы через align-self (flex-start, center, flex-end) выровнять.

Пример
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы