css双飞翼布局指的是左右两侧盒子固定，中间的盒子自适应大小
这里有四种方式可以实现
一、利用浏览器加载顺序
将中间需要自适应的盒子放在最后，让浏览器左后加载，先让左右两个固定宽度的盒子浮动上去，中间自适应的盒子就可以上去了。
<style>
* {
margin: 0;
padding: 0;
}
.left-box {
float: left;
width: 300px;
height: 900px;
background: pink;
}
.conter-box {
overflow: hidden;
height: 900px;
background: purple;
}
.right-box {
float: right;
width: 300px;
height: 900px;
background: skyblue;
}
</style>
</head>
<body>
<div class="left-box"></div>
<div class="right-box"></div>
<div class="conter-box"></div>
</body>
二、利用css3属性中的calc()计算属性
利用css3中的计算属性让中间自适应的盒子的宽度100% 减去 两边固定的宽度分给加上浮动属性
<style>
* {
margin: 0;
padding: 0;
}
.left-box {
float: left;
width: 300px;
height: 900px;
background: pink;
}
.conter-box {
float: left;
width: calc(100% - 600px);
overflow: hidden;
height: 900px;
background: purple;
}
.right-box {
float: right;
width: 300px;
height: 900px;
background: skyblue;
}
</style>
</head>
<body>
<div class="left-box"></div>
<div class="conter-box"></div>
<div class="right-box"></div>
</body>
三、利用定位属性
利用定位属性左右设置为两边固定盒子的宽度即可
<style>
* {
margin: 0;
padding: 0;
}
.left-box {
float: left;
width: 300px;
height: 900px;
background: pink;
}
.conter-box {
position: absolute;
top: 0;
left: 300px;
right: 300px;
overflow: hidden;
height: 900px;
background: purple;
}
.right-box {
float: right;
width: 300px;
height: 900px;
background: skyblue;
}
</style>
</head>
<body>
<div class="left-box"></div>
<div class="conter-box"></div>
<div class="right-box"></div>
</body>
四、利用flex布局
在外部套一个大盒子设置div属性紧贴两边中间自适应属性justify-content: space-between;
<style>
* {
margin: 0;
padding: 0;
}
.box {
display: flex;
justify-content: space-between;
}
.left-box {
width: 300px;
height: 900px;
background: pink;
}
.conter-box {
flex: 1;
height: 900px;
background: purple;
}
.right-box {
width: 300px;
height: 900px;
background: skyblue;
}
</style>
</head>
<body>
<div class="box">
<div class="left-box"></div>
<div class="conter-box"></div>
<div class="right-box"></div>
</div>
网友评论