css 五种两边固定,中间自适应的实现方式

<!DOCTYPE html>
<html>
	<head>
		<title>BFC</title>
		<style>
			body {
				overflow: scroll;
			}
			
			/* position:absolute */
			.left, .right {
				position: absolute;
				width: 230px;
				top: 0;
				height: 50px;
				background-color: blue;
			}
			.left {
				left: 0;
			}
			.right {
				right: 0;
			}
			.main {
				margin: 0 230px;
				height: 50px;
				background-color: blueviolet;
			}

			/* float */
			#content2 {
				margin-top: 30px;
				width: 100%;
			}
			#left1 {
				float: left;
				width: 230px;
				background-color: blue;
				height: 50px;
			}
			#right1 {
				float: right;
				width: 230px;
				background-color: blue;
				height: 50px;
			}
			#main1 {
				background-color: blueviolet;
				height: 50px;
			}

			/* display:table */
			#content3 {
				display: table;
				margin-top: 40px;
				width: 100%;
				height: 50px;
			}
			#left2 {
				display: table-cell;
				width: 230px;
				height: 50px;
				background-color: blue;
				left: 0;
			}
			#right2 {
				display: table-cell;
				width: 230px;
				background-color: blue;
			}
			#main2 {
				width: 100%;
				height: 50px;
				background-color: blueviolet;
			}

			/* flex */
			#content4 {
				display: flex;
				width: 100%;
				height: 50px;
				margin-top: 30px;
			}
			#left4 {
				width: 230px;
				left: 0;
				background-color: blue;
			}
			#right4 {
				width: 230px;
				background-color: blue;
			}
			#main4 {
				flex: 1;
				background-color: blueviolet;
			}
			/* display: grid */

			#grid {
				margin-top: 30px;
				display: grid;
				height: 50px;
				grid-template-columns: 230px auto 230px;
				width: 100%;
			}

		</style>
	</head>
	<body style="position: relative;">
		<div class="left"></div>
		<div class="right"></div>
		<div class="main"></div>
		<div id="content2">
			<div id="left1"></div>
			<div id="right1"></div>
			<div id="main1"></div>
		</div>
		<div id="content3">
			<div id="left2"></div>
			<div id="main2"></div>
			<div id="right2"></div>
		</div>
		<div id="content4">
			<div id="left4"></div>
			<div id="main4"></div>
			<div id="right4"></div>
		</div>
		<div id="grid">
			<div style="background: blue;"></div>
			<div style="background: blueviolet;"></div>
			<div style="background: blue;"></div>
		</div>
	
		</div>
	</body>
</html>

实现效果图:

©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页