3

Как реализовать поведение блоков подобно приведенному на изображении средствами HTML/CSS. Вся проблема заключается в 3 блоке.

Требуемое поведение

1
  • Если вам дан исчерпывающий ответ, отметьте его как верный (галка напротив выбранного ответа). Commented 2 мар. 2016 в 12:51

2 ответа 2

0

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
.container {
  max-width: 1000px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  font: 30px'Segoe UI', sans-serif;
}
[class^=b-] {
  margin: 10px 0;
}
.b-1,
.b-3 {
  background: #ccc;
  width: calc(100% - 360px);
  padding: 25px;
}
.b-2 {
  position: absolute;
  top: -10px;
  right: 0;
  width: 350px;
  min-height: 190px;
  padding: 25px;
  background: #ddd;
}
@media screen and (max-width: 767px) {
  .b-1,
  .b-2,
  .b-3 {
    width: 100%;
  }
  .b-2 {
    position: relative;
    top: 0;
    right: 0;
    min-height: 50px;
  }
}
<div class="container">
  <div class="b-1">1</div>
  <div class="b-2">2</div>
  <div class="b-3">3</div>
</div>

0

Или можно с использованием float

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
..container {
  max-width: 1000px;
  margin: 0 auto;


}
[class^=b-] {
  margin: 10px 0;
}
.b-1,
.b-3 {
  background: #ccc;
  width: 35%;
  float: left;
  padding: 25px;
  clear: both;
}
.b-2 {
  width: 60%;
  padding: 25px;
  background: #ddd;
  float: right;


}
@media screen and (max-width: 767px) {
  .b-1,
  .b-2,
  .b-3 {
    width: 100%;
  }
}
<div class="container">
  <div class="b-1">1</div>
  <div class="b-2">2</div>
  <div class="b-3">3</div>
</div>

Ваш ответ

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

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