三栏布局:圣杯布局、双飞翼布局、CSS3布局、绝对定位法、fle
2018-07-25 本文已影响593人
超人阿亮
圣杯布局和双飞翼布局的目的,都是左右两栏固定宽度,中间部分自适应。
示例目标:左200px,右100px,中间自适应,三部分高度一致。
双飞翼布局
布局思路:中间是身体,两边是翅膀,先把重要的身体部分放好,然后再将翅膀移动到适当的地方。
- html代码中,中间部分放前面,然后是左边、右边。
- 将三部分都float:left
- 中间部分,width:100%
- main占满了,左边部分margin-left: -100%,右边margin-left: -100px
- 中间部分的左右被左边部分和右边部分覆盖了,在中间增加个内层,设置margin:0 100px 0 200px
圣杯布局
对应上方双飞翼布局:
- 相同
- float: left相同,加上position: relative
- 相同
- 相同
- 中间部分加padding: 0 100px 0 200px,左右再处理。
CSS3布局
- 左中右按顺序放在html中,float: left,
- 中间 width: calc(100% - 400px)