Margin负边距使用之双飞翼布局

双飞翼布局是一种解决页面三列布局的技巧,由淘宝前端专家提出。通过浮动、负边距和相对定位,实现固定宽度边栏和自适应宽度中间栏。中间栏首先浮动并占据100%宽度,左右边栏通过负边距定位。负边距在文档流中的元素上使用,会导致元素位置偏移,且后续元素会填充偏移后的空间。在浮动元素中,负边距能覆盖前一个元素,实现一行布局。通过在中间栏内设置子元素并调整margin,完成最终效果。
摘要由CSDN通过智能技术生成

在页面布局中,经常会遇到左右两边宽度固定中间自适应的布局需要,其中有一个很巧妙的方式叫双飞翼布局。双飞翼是由淘宝玉伯等前端大牛提出的一种多列布局方法,主要利用了浮动、负边距、相对定位三个布局属性,使三列布局就像小鸟一样,拥有中间的身体和两侧的翅膀。下面是是实现原理:
1 首先给出html的div结构:

<div class="grid">
            <div id="div-middle">div-middle</span></div>
            <div id="div-left"><span>div-left</span></div>
            <
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值