Подскажите как грамотно расположить блоки как на данном рисунке(блок 3 немного заезжает на блок 1,), что б они сохранили при этом адаптивность свою(при изменении ширины экрана не проваливались ни куда). Можно и на бутстрапе, просто интересен грамотный подход, да бы минимизировать использование лишних тегов и стилей.Заранее спасибо
Ответ
css - calc()
browser support calc
.block-1 {
height: 200px;
background: #ccc;
}
.block-2,
.block-3 {
height: 100px;
background: #ddd;
}
.block-3 {
height: 100px;
background: #999;
margin-left: -50px;
width: calc(100% + 50px)!important;
}
@media screen and (max-width: 767px) {
.block-3 {
margin-left: 0;
width: 100%!important;
}
}
1
2
3
Комментариев нет:
Отправить комментарий