首页 > 其他分享> 文章详细

三栏布局之双飞翼布局（两侧固定宽度，中间自适应）

2019-11-28 15:56:15 阅读：279 来源： 互联网

标签：float 盒子布局双飞翼宽度三栏 200px margin left

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

三栏布局之双飞翼布局（两侧固定宽度，中间自适应）