双飞翼布局----利用float和margin实现双飞翼布局

双飞翼布局实现两边定宽,中间自适应的三栏布局,中间栏要放在文档流前面以优先渲染。
这里对布局进行改进,会将中间栏放到两边定宽后渲染!

HTML代码

<div id="main-content">
    <div id="main-left">left容器</div>
    <div id="main-right">right容器</div>
    <div id="main-center">center容器</div>
</div>

CSS代码

#main-left,#main-right,#main-center{
    height: 200px;
    color: #fff;
    box-sizing: border-box;
    padding: 10px;
}
#main-left{
    float: left;
    background: blue;
    width: 100px;
}
#main-right{
    float: right;
    background: green;
    width: 100px;
}
#main-center{
    margin: 0 100px;
    background: pink;
}

改进原理,就是根据浮动(float)会脱离文档流,先将左右两边的固定进行左右浮动,然后将center进行margin-left和margin-right居中就好!

双飞翼布局的原理

圣杯布局的原理

DEMO

其他

我的博客,欢迎交流!

我的CSDN博客,欢迎交流!

微信小程序专栏

前端笔记专栏

微信小程序实现部分高德地图功能的DEMO下载

微信小程序实现MUI的部分效果的DEMO下载

微信小程序实现MUI的GIT项目地址

微信小程序实例列表

前端笔记列表

游戏列表

原文地址:https://www.cnblogs.com/linewman/p/9918517.html