效果:

  • 实现三栏布局,两侧宽度固定,中间内容自适应
  • 一般用于PC

圣杯布局

image.png

双飞翼布局

image.png

总结

1.使用float布局
2.两侧使用margin负值,以便和中间内容横行重叠
3.防止中间内容被两侧覆盖圣杯用padding,双飞翼用margin