Как реализовать поведение блоков подобно приведенному на изображении средствами HTML/CSS. Вся проблема заключается в 3 блоке.
2 ответа
* {
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>
Или можно с использованием 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>