Flex实现环绕布局

来源：互联网发布：php中文手册下载编辑：程序博客网时间：2024/06/01 10:09

    html,body{        width: 100%;        height: 100%;    }    html,body,ul,li,a{        padding: 0;        margin: 0;        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>

这里写图片描述

0 0