您现在的位置是：网站首页> 编程资料编程资料

css多种方式实现双飞翼布局_CSS教程_CSS_网页制作_

2023-11-05 145人已围观

简介这篇文章主要介绍了css多种方式实现双飞翼布局的相关资料,小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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

圣杯布局、双飞翼布局就是左右两侧宽度固定，中间内容宽度自适应，即100%

圣杯布局

header
main
left
right
footer

浮动实现双飞翼布局

header
main
left
right
footer

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

header
left
main
right
footer

绝对定位实现双飞翼布局

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

header
left
mian
right
footer

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

header
left
main
right
footer

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