本文详细介绍了前端布局中的双飞翼布局，通过CSS代码展示了如何设置header、main、left、right和footer各部分，重点讲解了浮动、负margin和内边距的使用来实现内容区域的自适应和侧边栏的定位。双飞翼布局适用于需要固定宽度侧边栏且主要内容区域随浏览器窗口大小变化的场景。
双飞翼布局
body,
div {
margin: 0;
padding: 0;
}
.hearder,
.left,
.right,
.footer {
text-align: center;
}
.hearder,
.footer {
background-color: gray;
height: 100px;
line-height: 100px;
}
.main,
.left,
.right {
float: left;
min-height: 200px;
}
.main {
width: 100%;
background-color: dodgerblue;
}
.main .main-container {
/*** margin & padding 都可实现*/
/* margin: 0 240px 0 200px; */
padding: 0 240px 0 200px;
}
.left {
width: 200px;
background-color: deeppink;
margin-left: -100%;
}
.right {
margin-left: -240px;
width: 240px;
background-color: darkturquoise;
}
.footer {
clear: both;
}
hearder
1mainmainmainmain mainmainmainmain mainmainmainmainmainmainmainmainmainmain mainmainmainmain
left
right
一键复制
编辑
Web IDE
原始数据
按行查看
历史
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
