3

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

2 ответа 2

4

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;
  }
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container-fluid">
  <div class="row">
    <div class="col-md-4 col-sm-4 block-1">1</div>
    <div class="col-md-8 col-sm-8">
      <div class="row">
        <div class="col-md-12 col-sm-12 block-2">2</div>
        <div class="col-md-12 col-sm-12 block-3">3</div>
      </div>
    </div>
  </div>
</div>

3
  • а что за calc в css? Для каких браузеров работает?
    – IC_
    24 мая 2016 в 11:36
  • 2
    caniuse.com/#feat=calc
    – soledar10
    24 мая 2016 в 11:53
  • Вместо col-md-4 col-sm-4 достаточно col-sm-4. И поскольку бутстрап работает в логике "mobile first", органичнее использовать min-width вместо max-width. Тогда margin-left и width для третьего блока понадобится определять только один раз - внутри @media screen and (min-width: 768px). 24 мая 2016 в 17:32
0

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

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

  1. Второй и третий блоки не надо заворачивать в отдельную строку.
  2. Вместо calc можно использовать проценты от ширины экрана.
  3. Поскольку бутстрап рабоает в логике "mobile first", органичнее использовать @media (min-width: 768px). Это позволяет задать width и margin-left для третьего блока только один раз, когда они отличаются от значений по умолчанию.
  4. 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;
  }
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
  <div class="row">
    <div class="col-sm-3 block-red"></div>
    <div class="col-sm-9 block-green"></div>
    <div class="col-sm-9 block-yellow"></div>
  </div>
</div>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.