COOLFE

年轻人,好好努力吧

30 1 2021

实现三栏布局

三栏布局,顾名思义就是两边固定,中间自适应

flex

  • 最常用,基本浏览器都兼容了

    grid

  • 兼容性比 flex 差点

    绝对定位

  • 脱离文档流,需要高度固定

  • center 的宽度要比 left 大,要不会显示不出来

  • 最后写 center

    浮动

  • 需要清除浮动

    表格

  • 兼容性好,无法设置边距

    双飞翼布局 && 圣杯布局

  • 都是上面的两边固定,中间自适应的布局

  • 中间部分在 DOM 结构上优先,以便先行渲染

    DEMO

  • https://codepen.io/coolfe/pen/WNGqpQG

    参考链接

  • https://github.com/ljianshu/Blog/issues/14