双飞翼布局

2019-03-19  本文已影响0人  星河光影

双飞翼布局即三栏布局,左右两边宽度自适应,中间自适应且先加载
<style>
*{
margin: 0;
padding: 0;
}
div{
float: left;
}
.container{
width: 100%;
}
.center{
width: 100%;
height: 100px;
background: lightcoral;
margin-left: 200px;
margin-right: 200px;
}
.left{
width: 200px;
height: 100px;
background: lime;
margin-left: -100%;
}
.right{
width: 200px;
height: 100px;
background: lightseagreen;
margin-left: -200px;
}
</style>

<div class="container"><div class="center">中间</div></div>
<div class="left">左边</div>
<div class="right">右边</div>

上一篇下一篇

猜你喜欢

热点阅读