day10双飞翼布局实现

最新推荐文章于 2024-09-19 10:06:46 发布

WEB-

最新推荐文章于 2024-09-19 10:06:46 发布

阅读量49

点赞数 1

文章标签： css html web

本文链接：https://blog.csdn.net/weixin_45637649/article/details/111358720

版权

<style>
    *{
        margin: 0;
        padding: 0;
    }
    .middel{
        width: 100%;
        height: 400px;
        background-color: gold;
        float: left;
    }
    .left{
        width: 200px;
        height: 400px;
        background-color: red;
        float: left;
        margin-left: -100%;
    }
    .right{
        width: 300px;
        height: 400px;
        background-color: blue;
        float: left;
        margin-left: -300px;
    }
    .clearfix{
        content: '';
        clear: both;
        display: block;
    }
    .middel-inner{
        margin: 0 300px 0 200px;
    }
</style>

<div class="wrap clearfix">
    <div class="middel">
        <div class="middel-inner">
            中间
        </div>
    </div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</div>