Flex实现环绕布局
html,body{
width: 100%;
height: 100%;
}
html,body,ul,li,a{
padding: 0;
margin: 0;
html的flex布局list-style-type: none;
text-decoration: none;
}
.
sup{
height: 100%;
width: 100%;
display: flex;
flex-wrap:wrap;//超⾏换⾏⽅式
}
.sub1{
height: 300px;
width: 80%;
flex: none;
background-color: #FF8000;
}
.sub2{
height: 600px;
width: 20%;
margin-top: -21.1%;//⾃⼰调节吧
flex: none;
background-color: #FFFF80;
}
.sub3{
height: 600px;
width:20%;
flex: none;
background-color: #FF8080;
}
.sub4{
height: 300px;
width: 80%;
flex: none;
background-color: #80FF80;
}
<div class="sup">
<div class="sub1"></div>
<div class="sub2"></div>
<div class="sub3"></div>
<div class="sub4"></div>
</div>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。