双飞翼布局

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
</head>
<style>
* {
    margin: 0;
    padding: 0;
}

.main,
.left,
.right {
    float: left;
    height: 200px;
}

.main {
    width: 100%;
    background: red;
}

.left {
    width: 20%;
    background: yellow;
    margin-left: -100%;
}

.right {
    width: 30%;
    background: black;
    margin-left: -30%;
}
</style>

<body>
    <div class="wrap">
        <div class="main">main</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

</html>
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

推荐阅读更多精彩内容