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

1. 浮动法

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

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

2. 定位法

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

	</style>
</head>
<body>
    <div class="parent">
	<div class="left"></div>
	<div class="right"></div>
	<div class="center"></div>
	</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{
		 300px; 
		background-color: red;
	}
	.right{
		 300px;
		background-color: yellow;
	}
	.center{
       		 flex:1;
		background-color: green;
	}

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

4.calc计算法

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

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