Как сверстать такую штуку?

Question

[Alex Raven]

Может быть, я туплю, но никак не могу придумать, как сверстать это. Сайт использует Bootstrap v4. Два блока один под другим по 400 пикселей высотой, и один 800. Картинки фоном. На ум приходит в первую очередь position: absolute, но что-то не хочется.



Вот мой код, но когда таких блоков например, 4 на странице, то почему-то белая граница идет "ступеньками".

https://jsfiddle.net/alex_raven/f22j9v46/#&togethe...

А сама проблема выглядит вот так:

Answer 1

[Ankhena]

display: flex;
flex-direction: column;

Или masonry

Comments

[Ярослав Иванов]

Float уже не в моде ?)

[Ankhena]

Ярослав Иванов: когда я писала ответ, картинка была только одна. При наличии еще двух нижних с флексом заморочно так делать.
А значит, либо масонри, для неизвестных блоков, либо флоат для известных.

Answer 2

[Nathan Stark]

Ну во первых, про позиционирование absolut'ом забудьте раз и на всегда, это признак низкого скила.
Ну а во вторых, я бы делал на flexbox'ах

Comments

[Рафаэль ™]

ничего нет плохого в абс поз, как и фикс поз
низкий скил - думать так
это просто способ, инструмент

[Dark Hole]

Артём Петренков: Макс Минимус:
1. absolute создает новую "точку отсчета", что может стать источником головной боли.
2. Это выходит, "фиксированная вестка" что добавляет головной боли в будущем

Answer 3

[kn1ght_t]

https://jsfiddle.net/uqap8vns/

Answer 4

[Alex Raven]

Я таки сверстал это - при помощи float, position: absolute там используется для позиционирования текста внутри этих блоков.

staging.spectapp.com/collections

Comments

[mydarck]

Красавчег!