CSS 单栏、双栏、三栏、圣杯、双飞翼布局

代码1

代码2

代码3

代码4-float版

代码4-float简化版

代码4-flex版

代码5

圣杯布局

双飞翼布局

以上圣杯／双飞翼布局改为flex版

---

其中：

• 圣杯布局：
  三列布局，两遍宽度固定，中间自适应，中间内容元素再dom元素次序中优先位置。
  缺点：中间栏最小宽度不能小于左侧边栏的宽度，不然会出现错乱。原因是左侧边栏要浮动上去，margin-left是-100%，如果中间栏宽度比左侧边栏小，那么就浮动不上去，因为对于侧边栏来说，中间栏的宽度空间是不够的。
• 双飞翼布局：
  比圣杯布局多用了1个div，少用4个css属性，分别是：
  • 圣杯布局容器的 padding-left和padding-right
  • 左右两个div的position: relative及对应的right、left

双飞翼布局子div里用margin-left和margin-right共2个属性，比圣杯布局思路更直接和简洁一点。简单说起来就是双飞翼布局比圣杯布局多创建了一个div，但不用相对定位了。