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_
    Commented 24 мая 2016 в 11:36
  • 2
    caniuse.com/#feat=calc
    – soledar10
    Commented 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). Commented 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>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

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