浅谈css双飞翼布局和圣杯布局

2020-05-05 07:59:47易采站长站整理

双飞翼布局

中间div内部创建子div用于放置内容
在该子div里用margin-left和margin-right为左右两栏div留出位置

多了1个div,少用4个css属性(圣杯布局中间divp的adding-left和padding-right这2个属性,加上左右两个div用相对布局position: relative及对应的right和left共4个属性,一共6个;而双飞翼布局子div里用margin-left和margin-right共2个属性,6-2=4)。

并且双飞翼布局还有个好处,让Main变成BFC元素了,屏幕宽度缩小Main也不会被挤下去,圣杯布局就会被挤下去。