Как лучше было бы сверстать этот блок?

Question

[Childhood]

Всем привет. Возник такой вопрос при вёрстке, кое-как сверстал этот блок, но мне кажется не правильно. Если в кратце то первые 4 картинки это 1 блок, большая картинка другой, и последние 2 картинки тоже блок, и float: right у каждого. Но мне кажется что это не совсем правильный способ. Скажите как лучше? Прикрепил картинку снизу:

Answer 1

[Сергей delphinpro]

>> первые 4 картинки это 1 блок
>> последние 2 картинки тоже блок
Зачем плодить сущности? Тут четыре почти одинаковых блока и один отличается от остальных.
Все флоатнуты влево. В первых двух блоках и в последнем - по две картинки, в третьем - одна.

Comments

[Childhood]

Спасибо! Точно, не додумался что можно поделить по 2-е картинки... Спасибо еще раз)

[Дмитрий]

Вообще я не разобрался до конца, задавать размеры шрифта, отступы, ширину и высоту в px нормально? Или желательно прибегать к %?

[Сергей delphinpro]

Дмитрий, не будет единственно правильного ответа. Шрифты лучше задавать в rem/em, но где-то нужны vw или %, а где-то и пиксели.
Отступы/размеры где-то зависят от родителей и задаются в процентах, где-то от шрифта и задаются в rem/em, а где-то и фикс нужен в пикселях.

Answer 2

[Александр Шемаханов]

Каждую картинку отдельным элементом надо. В данном случаей проще сделать 4 колонки равной ширины. И где надо делай внутри клонки один или два блока.
Пример на Codepen

Answer 3

[Ankhena]

https://jsfiddle.net/n1Lmcexv/
Если с ИЕ10+

Answer 4

[Web Developer Blog]

флексы