三栏布局（左右宽度固定 中间自适应）

要求：高度已知，左右两栏宽度固定为300px，中间自适应

方案一    float 浮动布局

<style>
	div{
		min-height:50px;
	}
	.left{
		width:300px;
		float:left;
		background: burlywood;
	}
	.right{
		width:300px;
		float:right;
		background: gold;
	}
	.middle{
		margin-left:300px;
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>
	<div class="right">右边</div>
	<div class="middle">中间</div>        <!--注意：middle放在下面-->
</div>
复制代码

方案二    absolute绝对定位

<style>
	div{
		min-height:50px;
	}
	.wrap{
		position:relative;
	}
	.left{
		position:absolute;
		left:0;
		top:0;
		width:300px;
		background: burlywood;
	}
	.right{
		position:absolute;
		right:0;
		top:0;		
		width:300px;
		background: gold;
	}
	.middle{
		margin-left:300px;
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：这里三个div顺序可以任意调整

方案三     margin负值

<style>
	div{
		min-height:50px;
	}
	.middle{
                float:left;
		width:100%;	
	}
	.middle .midIn{
		margin:0 300px;
		background:greenyellow;
	}
	.left{
		float:left;
		width:300px;
		margin-left:-100%;
		background: burlywood;
	}
	.right{	
		float:left;
		width:300px;
		margin-left:-300px;
		background: gold;
	}
</style>
复制代码

<div class="wrap">
	<div class="middle">
		<div class="midIn">中间</div>
	</div>
	<div class="left">左边</div>		
	<div class="right">右边</div>
</div>
复制代码

方案四  table表格布局

<style>
	div{
		min-height:50px;
	}
	.wrap{
		width:100%;  //不能忽略
		display:table;
	}
	.left{
		display: table-cell;
		width:300px;
		background: burlywood;
	}
	.right{	
		display: table-cell;
		width:300px;
		background: gold;
	}
	.middle{
        display: table-cell;	
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">	
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：三栏中一栏的高度变动，其他两栏也会随之变化

方案五   flex 弹性布局

<style>
	div{
		min-height:50px;
	}
	.wrap{
		display:flex;
		flex-direction: row;
	}
	.left{
		width:300px;
		background: burlywood;
	}
	.right{
		width:300px;
		background: gold;
	}
	.middle{
		flex:1;
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：写flex布局时要加浏览器内核前缀，并且只支持IE10及以上。

方案六   grid网格布局

<style>
	.wrap{
		display:grid; /*要加浏览器内核前缀*/
		grid-template:50px/300px 1fr 300px;
	}
	.left{   
		background: burlywood;
	}
	.right{
		background: gold;
	}
	.middle{
		background:greenyellow;
	}
</style>
复制代码

<div class="wrap">
	<div class="left">左边</div>	
	<div class="middle">中间</div>	
	<div class="right">右边</div>
</div>
复制代码

注：支持IE11及以上，Opera Mini等不兼容。网格布局入门参考文章：http://www.css88.com/archives/8661

方案七     父元素生成BFC

<style>
	div{
	        min-height:50px;
	}
	.left{
		float:left;
		width:300px;
		background: burlywood;
	}
	.right{	
		float:right;
		width:300px;
		background: gold;
	}
	.middle{
		overflow:hidden;
		width:100%;
		background:greenyellow;
	}
</style>
复制代码

<div class="middle">
	中间
	<div class="left">左边</div>	
	<div class="right">右边</div>
</div>
复制代码

依据BFC布局原理：BFC的区域不会与float box重叠

转载于:https://juejin.im/post/5b08102751882538aa1edf88