CSS 左右两边固定中间自适应方案

<div class="content">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</div>

方案一

使用定位(基础方案)

.content{
	position:relative;
	padding:0 200px 0 200px;
	// 上右下左 数值变换
	box-sizing:border-box;
	// 盒模型
}
.left:{
	position:absolte;
	top:0;
	left:0;
}
.center{
	width:100%
}
.right{
	position:absolte;
	top:0;
	right:0;
}

方案二

flex

.content{
	display:flex;
	height:100vh;
	// 100vh 100%
}
.left .right{
	width:200px;
}
.center{
	width:calc(100% - 400px);
	// flex:1 ;
	// flex:1 width:calc(100% -400px) 两种方案都可以
}

方案三

浮动

.left{
	width:200px;
	float:left
}
.right{
	float:right;
	width:200px
}
.center{
	width:calc(100% - 400px);
	// 此处父级没有display：flex ｜ box 不属于弹性盒模型 flex：1 会失效
	float:left;
}