两,三栏布局,圣杯双飞翼

1. 两栏布局,左边定宽,右边自适应

左边左浮动,右边加oveflow:hidden;变成BFC清除左侧浮动元素的影响

2. 三栏布局,圣杯布局、双飞翼布局

原来我做的主要是后台管理和一些移动端的项目,这两种布局呢是我原来查阅资料时看到的,所以就做了个简单的理解。
圣杯布局和双飞翼布局是前端工程师需要日常掌握的重要布局方式。两者的功能相同,都是为了实现一个两侧宽度固定,中间宽度自适应的三栏布局。(中间先加载渲染)

  1. 首先要给两侧设置padding预留出相应的空间

  2. 随后分别为三列设置宽度与浮动,同时对footer设置清除浮动

  3. 根据浮动的特性,由于center的宽度为100%,即占据了第一行的所有空间,所以left和right被“挤”到了第二行。

  4. 接下来的工作是将left放置到之前预留出的位置上,这里使用负外边距

  5. 这里使用position: relative和right: 200px将left的位置在原有位置基础上左移200px,以完成left的

  6. 接下来放置right,只需添加一条声明即可

  7. 此,布局效果完成。不过还需要考虑最后一步,那就是页面的最小宽度:要想保证该布局效果正常显示,由于两侧都具有固定的宽度,所以需要给定页面一个最小的宽度,但这并不只是简单的200+150=350px。回想之前left使用了position: relative,所以就意味着在center开始的区域,还存在着一个left的宽度。所以页面的最小宽度应该设置为200+150+200=550px

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值