Нужно разместить блоки 1,2,3 и 4 так, как показано на рисунке справа. При этом нельзя использовать абсолютное позиционирование. Все должно быть с использованием float или display: inline-block (разрешается комбинировать). HTML разметку менять нельзя.
Входные данные: ширина блоков 1,2 и 4 одинакова и равна 100px. Ширина блока 3 равна 64px, высота - 75px. Расстояние между блоками равно 6px. Ширина общего контейнера (main-container) 170px. (В ряд влезает блок 3 + блок 4 + расстояние между ними в 6 px.)
Главная проблема: чтобы блок 4 встал поверх всех блоков.
.main-container {
font-size: 25px;
width: 170px;
}
.block1 {
width: 100px;
background: red;
}
.block2 {
width: 100px;
background: blue;
}
.block3 {
width: 64px;
height: 75px;
background: orange;
}
.block4 {
width: 100px;
background: green;
}
<div class="main-container">
<div class="block1">1</div>
<div class="block2">2</div>
<div class="block3">3</div>
<div class="block4">4</div>
</div>
htm
? Подозреваю, что имелся в видуhtml
. Если это не так, то объясните, пожалуйста, что это.