CSS: Layout: Implement: Traditional 2-column Implement

 20th August 2020 at 2:19pm

传统的两栏布局,主体内容区和侧边栏,中间带有间隙(gutter)。

实现要点是:

  • 使用 float: left 将两个块元素弄成一行
  • 使用百分比切割宽度(width: 70%
  • 使用 calc 函数计算被 gutter 占了部分空间后的侧边栏宽度

当然还有无数种实现方法,比如:

  • 左右栏的宽度使用固定值(如 600px)
  • 某一栏宽度使用固定值,另外一栏随 viewport 变化