三栏布局

描述：左右宽度200px，中间自适应

第一种：浮动布局

		<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			width: 100%;
		}
		.box {
			float: left;
			height: 200px;
		}
		.center {
			margin: 0 200px;
			background: red;
			height: 200px;
		}
		.left {
			margin-left: -100%;
			width: 200px;
			background: yellow;
		}
		.right {
			margin-left: -200px;
			background: blue;
			width: 200px;
		}
	</style>
	//布局
	<div class="container">
		<div class="center">中间</div>
	</div>
	<div class="left">左边</div>
	<div class="right">右边</div>

第二种：绝对定位布局

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			position: relative;
			width: 100%;
			height: 200px;
		}
		.container div {
			height: 200px;
		}
		.left {
			position: absolute;
			width: 200px;
			left: 0;
			top: 0;
			background: yellow;
		}
		.right {
			position: absolute;
			width: 200px;
			right: 0;
			top: 0;
			background: blue;
			
		}
		.center {
			margin: 0 200px;
			background: red; 
		}

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

第三种：flex布局

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			display: flex;	
		}
		.container div {
			height: 200px;
		}
		.left {
			width: 200px;
			background: yellow;
		}
		.right {
			width: 200px;
			background: blue;
		}
		.center {
			flex: 1;
			background: red;
		}
	</style>
	
	<div class="container">
		<div class="left">左边</div>
		<div class="center">中间</div>
		<div class="right">右边</div>
	</div>
	

第三种：table布局

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			display: table;
			width: 100%;
		}
		.container div {
			height: 200px;
			display: table-cell;
		}
		.left {
			width: 200px;
			background: yellow;
		}
		.right {
			width: 200px;
			background: blue;
			
		}
		.center {
			background: red; 
		}
	</style>
	
	<div class="container">
		<div class="left">左边</div>
		<div class="center">中间</div>
		<div class="right">右边</div>
	</div>

第五种：网格布局

<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		.container {
			display: grid;
			width: 100%;
			grid-template-rows: 200px;
			grid-template-columns: 200px auto 200px;
		}
		.container div {
			height: 200px;
		}
		.left {
			background: yellow;
		}
		.right {
			background: blue;
		}
		.center {
			background: red; 
		}
	</style>
	<div class="container">
		<div class="left">左边</div>
		<div class="center">中间</div>
		<div class="right">右边</div>
	</div>

grid-template-rows 指定的每个值可以创建每行的高度;
grid-template-columns 指定的每个值来创建每列的列宽