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

Question

[Neylolz]

Хочу сверстать первый макет,вот только не знаю как сверстать данные блоки,чтобы это было максимально правильно.

я собирался взять в общий див.
потом на 1 строчке 2 дива. Допустим 1 блоку ширину 33% второму 66%
на 2 строчке 3 дива,навесить одинаковый класс
на 3 строчке аналогично 1
и 4 строчка аналогично 2.
зафлоатить это дело влево.
Но мне кажется что это слишком кривой вариант,и есть куда удачнее

Answer 1

[iBird Rose]

лучше сделать див с шириной 100% и задать ему фон. а синий блок в 33% уже внутрь засунуть.

Comments

[indigo_style]

Если делать фон то, у 1 фона будет скрыто 33% картинки?

[iBird Rose]

indigo_style: да. но зато при адаптировании это будет выглядеть намного красивее нежели делать такое через 2 float: left блока

[indigo_style]

iBird Rose: может flex тогда?

[iBird Rose]

indigo_style: какая разница как их распологать. хоть через inline-block. хоть через display: table. это будут 2 разных блока. а я предлагаю фон сделать 100% а маленький блок вставить в него

Answer 2

[HamSter]

.col-13 {float:left; width: 33.3333%;}
.col-23 {float:left; width: 66.66666%;}

<div class="row">
<div class="col-13"> </div>
<div class="col-23"> </div>
</div>
<div class="row">
<div class="col-13"> </div>
<div class="col-13"> </div>
<div class="col-13"> </div>
</div>
<div class="row">
<div class="col-23"> </div>
<div class="col-13"> </div>
</div>