Как правильно сверстать блоки?

Question

[MRcracker]

Как правильно сверстать подобные блоки?

Comments

[Максим Тимофеев]

А какие у Вас есть варианты?

[MRcracker]

я сверстал неправильно данный блок т.к. получилось много дублирующего кода. почему и спрашиваю как правильно реализуются подобные блоки, может примеры какие-то кто пришлет или покажет как правильно реализовать одинаковые элементы не дублируя стили

Answer 1

[alvvi]

https://codepen.io/Alvvi/pen/mMoOgY
Как вы умудрились тут "дублировать стили" ума не приложу.

Comments

[MRcracker]

без использования flex можно реализовать или будет слишком много кода как в моем случае?

[alvvi]

MRcracker, тут флекс только высоту элементам ровняет грубо говоря, никакой адаптивности ведь нет.
попробуйте его убрать вообще и сами увидите

[alvvi]

MRcracker, обновил, теперь на float'ах.

[MRcracker]

Спасибо большое))))))

[MRcracker]

Илья Ростопка, а если второй блок сделать картинкой вместо цвета и в каждом повторяющемся блоке должна быть новая картинка? как это должно выглядеть правильно?

[alvvi]

MRcracker, убрать margin, вставть img c float'ом и width: 50%

[MRcracker]

Илья Ростопка, спасибо, уже сам дошел до этого решения)))))

Answer 2

[wbrapist]

https://jsfiddle.net/58j3632n/

Answer 3

[zax2002]

https://jsfiddle.net/2sazs1pv/
Ну как-то так, возможно это полное г@#но, но всё же
Или можно проще: https://jsfiddle.net/3zee46dt/