左右两列固定宽度，中间自适应，三栏布局

1.利用浮动

注意：中间栏放在最后

2.利用定位

左右两边用margin挤出来，

<style>
	*{
		margin:0;
		padding:0;
	}
	body,html{
		height: 100%;
		font-size: 26px;
	}
	.wrap{
		width:100%;
		height: 100%;
		position: relative;
	}
	.left{
		width:100px;
		height:100%;
		position:absolute;	
		top:0;	
		left:0;
		background:pink ;
	}
	.right{
		width:100px;
		height:100%;
		position:absolute;	
		top:0;	
		right:0;
		background: blue;
	}
	.mid{
		height:100%;
		margin:0 100px;
		background: yellow;
	}
</style>

3，使用cacl();

html

<div class='left'>left</div>
<div class="mid">mid</div>	
<div class="right">right</div>

css

	*{
		margin:0;
		padding:0;
	}
	body,html{
		height: 100%;
        font-size: 26px;
	}
	
	.left{
		display: inline-block;		
		width:100px;
		height:100%;
		background:pink ;
	}
	.right{
		display: inline-block;
		width:100px;
		height:100%;
		background: blue;
	}
	.mid{
		display: inline-block;
		width: calc(100% - 200px);
		height:100%;
		background: yellow;
	}

但是此时会出现

最后一个元素会掉下去，因为转换为行内块的元素之间会有空；

解决行内及行内块元素之间的空；

a，标签不要换行（中间不要有空格）；

b.父级元素设置font-size：0；

c.设置行内元素margin为负值；

d.设置父元素letter-spacing或word-spacing为负值，