前端开发笔记

三栏布局:圣杯布局、双飞翼布局、CSS3布局、绝对定位法、fle

2018-07-25  本文已影响593人  超人阿亮

圣杯布局和双飞翼布局的目的,都是左右两栏固定宽度,中间部分自适应。
示例目标:左200px,右100px,中间自适应,三部分高度一致。

双飞翼布局

布局思路:中间是身体,两边是翅膀,先把重要的身体部分放好,然后再将翅膀移动到适当的地方。

  1. html代码中,中间部分放前面,然后是左边、右边。
  2. 将三部分都float:left
  3. 中间部分,width:100%
  4. main占满了,左边部分margin-left: -100%,右边margin-left: -100px
  5. 中间部分的左右被左边部分和右边部分覆盖了,在中间增加个内层,设置margin:0 100px 0 200px

圣杯布局

对应上方双飞翼布局:

  1. 相同
  2. float: left相同,加上position: relative
  3. 相同
  4. 相同
  5. 中间部分加padding: 0 100px 0 200px,左右再处理。

CSS3布局

  1. 左中右按顺序放在html中,float: left,
  2. 中间 width: calc(100% - 400px)
上一篇下一篇

猜你喜欢

热点阅读