CSS三栏自适应布局，左中右，上中下-CSDN博客

本文对可以实现三栏布局的方法进行了整理

左右固定宽度，中间自适应(5种方法)

1.float方法 2.absolute方法 3.flexbox方法 4.table方法 5.grid方法

<html>
<head>
	<meta charset="utf-8">
	<title>css布局全解</title>
	<style type="text/css">
		html *{
			padding: 0;
			margin: 0
		}
		.layout article div{
			min-height: 50px;
		}

		.layout{
			margin-top: 10px;
		}


	</style>
</head>
<body>
	<!-- 1.float 方法-->
	<section class="layout float">
		<style media="screen">
			.layout.float .right{
				float: right;
				width: 300px;
				background: red;
			}
			.layout.float .left{
				float: left;
				width: 300px;
				background: blue;
			}
			.layout.float .center{
				background: yellow;
			}
		</style>
		<article class="left-right-center">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
			</div>
		</article>
	</section>

	<!-- 2.绝对定位写法 -->
	<section class="layout absolute">
		<style>
			.layout.absolute .left-center-right div{
				position: absolute;
			}
			.layout.absolute .left{
				width: 300px;
				left: 0;
				background: blue;
			}
			.layout.absolute .center{
				left: 300px;
				right: 300px;
				background: yellow;
			}
			.layout.absolute .right{
				width: 300px;
				right: 0px;
				background: red;
			}
			
			
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>绝对定位解决方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 3.flex布局 -->
	<section class="layout flexbox">
		<style>
			.layout.flexbox{
				margin-top: 70px;
			}
			.layout.flexbox .left-center-right{
				display: flex;
			}
			.layout.flexbox .left{
				width: 300px;
				background: blue;
			}
			.layout.flexbox .center{
				flex:1;
				background: yellow;
			}
			.layout.flexbox .right{
				width: 300px;
				background: red;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>flex定位解决方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!-- 4.表格布局 -->
	<section class="layout table">
		<style>
			.layout.table .left-center-right{
				display: table;
				width: 100%;
				height: 50px;
			}
			.layout.table .left-center-right div{
				display: table-cell;
			}
			.layout.table .left{
				width: 300px;
				background: blue;
			}
			.layout.table .center{
				background: yellow;
			}
			.layout.table .right{
				width: 300px;
				background: red;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>表格定位解决方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>

	<!--5.网格布局 -->
	<section class="layout grid">
		<style>
			.layout.grid .left-center-right{
				display: grid;
				width: 100%;
				grid-template-rows: 50px;
				grid-template-columns: 300px auto 300px;
			}
			.layout.grid .left{
				background: blue;
			}
			.layout.grid .center{
				background: yellow;
			}
			.layout.grid .right{
				background: red;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h1>网格定位解决方案</h1>
			</div>
			<div class="right"></div>
		</article>
	</section>
</body>
</html>
复制代码

上下固定高度，中间自适应(4种方法)

1.absolute方法 2.flexbox方法 3.table方法 4.grid方法

<html>
<head>
	<meta charset="utf-8">
	<title>css上下高度不变，中间自适应布局</title>
	<style type="text/css">
		html *{
			padding: 0;
			margin: 0;
		}
		#wrapper div{
			width: 150px;
		}
		#wrapper div.one,.two,.three,.four{
			width: 150px;
			height: 100%;
			display: inline-block;
			float: left;
		}
		.one,.two,.three{
			background: green;
		}
		
	</style>
</head>
<body>
	<div id="wrapper">
		<!-- 1.absolute方法 -->
		<div class="one">
			<style type="text/css">
				.layout.absolute div{
					position: absolute;
					float: left;
				}
				.layout.absolute .top{
					top: 0;
					height: 100px;
					background: red;
				}
				.layout.absolute .bottom{
					bottom: 0;
					height: 100px;
					background: blue;
					float: left;
				}
				.layout.absolute .center{
					top: 100px;
					bottom: 100px;
					background: yellow;
					overflow: auto;
				}

			</style>
			<article class="layout absolute">
				<div class="top"></div>
				<div class="center">
					<h1>absolute中间自适应元素</h1>
				</div>
				<div class="bottom"></div>
			</article> 
		</div>

		<!-- 2.flex方法 -->
		<div class="two">
			
			<style type="text/css">
				.two{
					margin-left:10px;
				}
				.layout.flexbox{
					display: flex;
					width: 100%;
					height: 100%;
					flex-direction:column;
				}
				.layout.flexbox .top{
					height: 100px;						
					background: red;
				}
				.layout.flexbox .center{
					flex:1;
					background: yellow;
				}
				.layout.flexbox .bottom{
					height: 100px;
					background: blue;
				}
			</style>
			<article class="layout flexbox">
				<div class="top"></div>
				<div class="center">
					<h1>flexbox中间自适应元素</h1>
				</div>
				<div class="bottom"></div>
			</article> 
		</div>

		<!-- 3.表格方法 -->
		<div class="three">
			<style type="text/css">
					.three{
						margin-left: 10px;
					}
					.layout.table{
						display: table;
						height: 100%;
						width: 100%;
					}
					.layout.table div{
						display: table-row;
						/*特别注意*/
						display: inline-block; 
					}
					.layout.table .top{
						height: 100px;			
						background: red;
					}
					.layout.table .center{
						height:calc(100% - 200px);
						background: yellow;
					}
					.layout.table .bottom{
						height: 100px;
						background: blue;
					}
				</style>
				<article class="layout table">
					<div class="top"></div>
					<div class="center">
						<h1>table方法中间自适应元素</h1>
					</div>
					<div class="bottom"></div>
				</article>
		</div>
		
		<!-- 4.grid方法 -->      
		<div class="four">
			<style>
				.four{
					margin-left: 10px;
				}
				.layout.grid{
					display: grid;
					height: 100%;
					grid-template-rows: 100px auto 100px;
					grid-template-columns: 150px;
				}
				.layout.grid .top{			
					background: red;
				}
				.layout.grid .center{
					background: yellow;
				}
				.layout.grid .bottom{
					background: blue;
				}
			</style>
			<article class="layout grid">
				<div class="top"></div>
				<div class="center">
					<h1>grid方法中间自适应元素</h1>
				</div>
				<div class="bottom"></div>
			</article>
		</div>
	</div>
</body>
</html>
复制代码