中间定宽，两边自适应布局的三种实现方法

1. 浮动加定位

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>中间定宽，两边自适应</title>
	<style type="text/css">
	html,body,div{
     	height: 100%;
	}
	.parent{
		position: relative;
		overflow: hidden;
	}
	.left{
		float: left;
		 50%; 
		margin-left: -150px;
		background-color: red;
	}
	.right{
		 float: right;
		 50%; 
		margin-right: -150px;
		background-color: yellow;
	}
	.center{
		position: absolute;
		left:50%;
		transform:translateX(-50%);
         300px;
		background-color: green;
	}
	.left .item{
		margin-left: 150px;
	}	
	.right .item{
		margin-right: 150px;
	}	
	</style>

</head>
<body>
    <div class="parent">
	<div class="left">
		<div class="item"></div>
	</div>
	<div class="right">
		<div class="item"></div>
	</div>
	<div class="center">
		<div class="item"></div>
	</div>

	</div>
</body>
</html>

2. calc计算法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>中间定宽，两边自适应</title>
	<style type="text/css">
	html,body,div{
     	height: 100%;
	}
	.left{
		 calc(50% - 150px);
		float: left;
		background-color: red;
	}
	.right{
		 calc(50% - 150px);
		float: right;
		background-color: yellow;
	}
	.center{
         300px;
        float: left;
		background-color: green;
	}
/*也可以将这三个div设置成display:inline-block,这样就不浮动了*/
	</style>
</head>
<body>
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
</body>
</html>

3. 弹性盒子法

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>中间定宽，两边自适应</title>
	<style type="text/css">
	html,body,div{
     	height: 100%;
	}
	.parent{
		display: flex;
	}
	.left{
		flex:1;
		background-color: red;
	}
	.right{
		flex:1;
		background-color: yellow;
	}
	.center{
       
         300px;
		background-color: green;
	}

	</style>
</head>
<body>
    <div class="parent">
	<div class="left"></div>
	<div class="center"></div>
	<div class="right"></div>
	</div>
</body>
</html>