两边定宽，中间自适应的方法总结

两边定宽，中间自适应的方法总结。

1. float + margin实现：

		//html
			<div class="parent">
				<div class="left">Left</div>
				<div class="right">Right</div>
				<!--特别需要注意：自适应宽度的div必须放在最后,如果把right div放到最后会被挤下来-->
				<div class="conter">Conter</div> 
			</div>
		//css
			.parent{
				width: 100%;
				height: 300px;
				background-color: white;
				box-sizing: border-box;
			}
			.left{
				width: 300px;
				height: 300px;
				background-color: coral;
				float: left;
			}
			.right{
				width: 300px;
				height: 300px;
				background-color: cornflowerblue;
				float: right;
			}
			.conter{
				margin: auto 300px;
				height: 300px;
				background-color: darkcyan;
			}
		/**
		*	左右盒子分别向左右浮动
		*	中间盒子设置 margin:auto 300px;
		*	上下自适应  左右各距离父盒子300px
		**/

2. flex布局发（兼容性一般）：

			//html
			<div class="parent"> 
				<div class="left"></div> 
				<div class="right"></div> 
				<div class="center"></div> 
			</div>
			//css
			.parent {
				display: flex;
				height: 300px;
			}

			.left {
				width: 300px;
				height: 300px;
				background-color: red;
				
			}

			.right {
				width: 300px;
				height: 300px;
				background-color: yellow;
			}

			.center {
				flex: 1;
				height: 300px;
				background-color: green;
			}

3. 定位法

		//html
		<div class="parent"> 
			<div class="left"></div> 
			<div class="right"></div> 
			<!--特别需要注意：自适应宽度的div必须放在最后,如果把right div放到最后会被挤下来-->
			<div class="center"></div> 
		</div>
		//css
		.parent {
				width: 100%;;
				height: 300px;
			}

			.left {
				width: 300px;
				height: 300px;
				position: absolute;
				left: 0;
				background-color: red;
			}

			.right {
				width: 300px;
				height: 300px;
				position: absolute;
				right: 0;
				background-color: yellow;
			}

			.center {
				margin: auto 300px;
				height: 300px;
				background-color: green;
			}