其他分享
首页 > 其他分享> > 三栏布局之双飞翼布局(两侧固定宽度,中间自适应)

三栏布局之双飞翼布局(两侧固定宽度,中间自适应)

作者:互联网

1、双飞翼布局

双飞翼布局是由淘宝开发人员提出,和圣杯布局有一些相似

2、原理

前四点都和圣杯布局一样

1.写结构,一个大盒子里放三个子元素,注意三个子元素的顺序:中-左-右

2.给三个子元素写float:left; 

3.给左侧的盒子设置margin-left:-100%;

4.给右侧的盒子设置margin-left:-右侧盒子盒子宽度

5.给中间的盒子再放一个子元素,给这个子元素设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度   或   设置margin:0 右侧盒子的宽度 0 左侧盒子的宽度

6.别忘记给父元素清除浮动 

7.给大盒子设置最小宽度 

代码:

    <style>
        .left{
            width: 300px;
            height: 200px;
            background: pink;
            float: left;
            margin-left: -100%;
        }
        .center{
            width: 100%;
            height: 300px;
            background:orange;
            float: left;
        }
        .right{
            width: 200px;
            height: 200px;
            background: skyblue;
            float: left;
            margin-left: -200px;
        }
        .centerMain{
            background: green;
            margin:0 200px 0 300px;
        }
    </style>

<body>
    <!-- 
    三栏布局:
        左侧:300px;
        中间:自适应
        右侧:200px
         -->
    <div class="box">
        <div class="center">
            <div class="centerMain">中</div>
        </div>
        <div class="left">左</div>        
        <div class="right">右</div>
    </div>
</body>

效果:

 

 

 

 

到这大家会发现三个盒子的高不一样,那么怎么样才能实现等高布局了?

在我的随笔里也有一些简单的介绍哦!!!!

 

标签:float,盒子,布局,双飞翼,宽度,三栏,200px,margin,left
来源: https://www.cnblogs.com/huchangwu/p/11950488.html