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

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

css多种方式实现双飞翼布局_第1张图片

从效果图来看圣杯布局、双飞翼布局效果是一样一样的。

圣杯布局、双飞翼布局就是左右两侧宽度固定,中间内容宽度自适应,即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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

你可能感兴趣的:(css多种方式实现双飞翼布局)