双飞翼布局
双飞翼布局是css的经典布局
实现双飞翼布局的目的:
为了实现一个两侧宽度固定,中间宽度自适应的三栏布局
html部分
<body>
<div class="top">top</div>
<div class="main">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
<div class="bottom">bottom</div>
</body>
css部分
*{
margin: 0;
padding: 0;
}
html,body,.main{
height: 100%;
}
.top{
background-color: rgb(248, 20, 20);
width: 100%;
height: 200px;
}
.left{
background-color: lightskyblue;
float: left;
width: 200px;
height:100%;
}
.center{
background-color: yellow;
float: left;
width:calc(100% - 400px);
height:100%;
}
.right{
background-color: rgb(119, 21, 95);
float: left;
width: 200px; ;
height:100%;
}
.bottom{
background-color: whitesmoke;
height: 200px;
width: 100%;
}
由代码可见
整体大的分成了三个大块top、bottom、main三个部分,其次是将main模块再分成了三个部分——right、center、left。且两侧的宽度是固定的,中间宽度自适应。
实现效果
部分显示
这里的高宽都是可以在css里面进行修改,都可以根据自己的需求自行修改。
以上为止。