Валидное расположение блоков

#css #bootstrap #div

Подскажите как грамотно расположить блоки как на данном рисунке(блок 3 немного заезжает
на блок 1,), что б они сохранили при этом адаптивность свою(при изменении ширины экрана
не проваливались ни куда). Можно и на бутстрапе, просто интересен грамотный подход,
да бы минимизировать использование лишних тегов и стилей.Заранее спасибо
    

Ответы

Ответ 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
      
    
  



Ответ 2

Поскольку вопрос про минимизацию кода, предлагаю ещё один вариант.

Строил то же, что и soledar10. Отличия в деталях:


Второй и третий блоки не надо заворачивать в отдельную строку.
Вместо calc можно использовать проценты от ширины экрана.
Поскольку бутстрап рабоает в логике "mobile first", органичнее использовать @media
(min-width: 768px). Это позволяет задать width и margin-left для третьего блока только
один раз, когда они отличаются от значений по умолчанию.
col-sm- действует для всех экранов шириной от 768 пикселей. Если при большей ширине
экрана поведение не меняется, то другие классы добавлять не нужно.




.block-red {
  background-color: red;
  height: 400px;
}
.block-green {
  background-color: green;
  height: 200px;
}
.block-yellow {
  background-color: yellow;
  height: 200px;
}
@media (min-width: 768px) {
  .block-yellow {
    margin-left: -10%;
    width: 85% !important;
  }
}