css多种方式实现双飞翼布局

圣杯布局、双飞翼布局效果图

从效果图来看圣杯布局、双飞翼布局效果是一样一样的。
圣杯布局、双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即100%

圣杯布局

header
main
left
right

浮动实现双飞翼布局

header
main
left
right

table-cell实现双飞翼布局(IE8也兼容哦~)

header
left
main
right

绝对定位实现双飞翼布局

使用绝对定位实现有个小问题:父容器的高度只能由.main的高度来决定

header
left
mian
right

使用flex实现双飞翼布局(有兼容性问题)

header
left
main
right

你可能感兴趣的:(table,圣杯布局,双飞翼布局,html,css)