双飞翼布局

最新推荐文章于 2022-12-29 23:17:02 发布

左一.

最新推荐文章于 2022-12-29 23:17:02 发布

阅读量2.5k

点赞数 12

文章标签： css html

本文链接：https://blog.csdn.net/C_players/article/details/114367345

版权

双飞翼布局

双飞翼布局是css的经典布局

实现双飞翼布局的目的：

为了实现一个两侧宽度固定，中间宽度自适应的三栏布局

html部分

<body>
    <div class="top">top</div>
    <div class="main">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
        
       
    </div>
    <div class="bottom">bottom</div>
</body>

css部分

 *{
            margin: 0;
            padding: 0;
        }
        html,body,.main{
            height: 100%;
        }
        .top{
            background-color: rgb(248, 20, 20);
            width: 100%;
            height: 200px;
        }
        .left{
            background-color: lightskyblue;
    
            float: left;
            width: 200px;
            height:100%;
        }
        .center{
            background-color: yellow;
            float: left;
            width:calc(100% - 400px);
            height:100%;
        }
        .right{
            background-color: rgb(119, 21, 95);
            float: left;
            width: 200px; ;
            height:100%;
        }
       
        .bottom{
            background-color: whitesmoke;
            height: 200px;
            width: 100%;
        }

由代码可见
整体大的分成了三个大块top、bottom、main三个部分，其次是将main模块再分成了三个部分——right、center、left。且两侧的宽度是固定的，中间宽度自适应。

实现效果

部分显示
在这里插入图片描述
这里的高宽都是可以在css里面进行修改，都可以根据自己的需求自行修改。

以上为止。

左一.

关注

12
点赞
踩
3

收藏

觉得还不错? 一键收藏
7
评论
双飞翼布局

双飞翼布局双飞翼布局是css的经典布局实现双飞翼布局的目的：为了实现一个两侧宽度固定，中间宽度自适应的三栏布局html部分<body> <div class="top">top</div> <div class="main"> <div class="left">left</div> <div class="center">center</div>
复制链接

扫一扫