三栏布局 左右固定定，中间根据屏幕宽度自适应

HTML代码

<div class="wrap">
			<div class="left">左边固定</div>
			<div class="content">中间自适应</div>
			<div class="right">右边固定</div>
</div>

CSS代码

第一种 定位；

			*{
				margin: 0 ;padding: 0;
			}
			.wrap{
				position: absolute;
				height: 100%;
				width: 100%;
			}
			.left, .right,.content{
				height: 200px;width: 100px;
				position: absolute;
			}
			.left{
				background: antiquewhite;
				left: 0;
			}
			.right{
				background: pink;
				right: 0;
			}
			.content{
				background: #f00;
				left: 100px;
				right: 100px;
				width: auto;
				text-align: center;
			}

第二种 浮动

浮动时候，right部门放在content左边

			*{
				margin: 0 ;padding: 0;
			}
			
			.left, .right,.content{
				height: 200px;width: 100px;
				
			}
			.left{
				background: antiquewhite;
				float: left;
			}
			.right{
				background: pink;
				float: right;
			}
			.content{
				background: #f00;
				text-align: center;
				width:auto ;
				overflow: auto;
			}

第三种Flex布局；

	*{
		margin: 0 ;padding: 0;
	}
	
	.left, .right,.content{
		height: 200px;width: 100px;
		
	}
	.left{
		background: antiquewhite;

	}
	.right{
		background: pink;
	}
	.content{
		background: #f00;
		text-align: center;
		flex: 1;
	}
	.wrap{
		display: flex;
	}

第四种 grid布局

		*{
				margin: 0 ;padding: 0;
			}
			
			.left, .right,.content{
				height: 200px;
				
			}
			.left{
				background: antiquewhite;

			}
			.right{
				background: pink;
			}
			.content{
				background: #f00;
				text-align: center;

			}
			.wrap{
				display: grid;
				grid-template-columns:100px auto 100px
			}

第五种 table-cell表格布局

		 *{
				margin: 0 ;padding: 0;
			}
			
			.left, .right,.content{
				height: 200px;
				display: table-cell;
				width: 100px;
			}
			.left{
				background: antiquewhite;

			}
			.right{
				background: pink;
			}
			.content{
				background: #f00;
				text-align: center;
				width: auto;
			}
			.wrap{
				display: table;
				width: 100%;

			}