三栏布局的6种实现方式

1.利用浮动

	<section class="layout float">
		<style type="text/css">
		.layout article div {
			height: 100px;
		}
		.layout.float .left {
			float: left;
			width: 300px;
			background: red;
		}
		.layout.float .right {
			float: right;
			width: 300px;
			background: blue;
		}
		.layout.float .center {
			background: yellow;
			margin: 0 300px;
		}
		</style>
		<article class="left-right-center">
			<div class="left"></div>
			<div class="right"></div>
			<div class="center">
				<h1>浮动解决方案</h1>
				1.这是三栏布局的中间部分
				2.这是三栏布局的中间部分
			</div>
		</article>
	</section>

2.双飞翼布局

	<section class="layout double">
		<style type="text/css">
			.layout article div {
				height: 100px;
			}
			.layout.double .left-center-right {
				overflow: hidden;
			}
			.layout.double .center {
				width: 100%;
				float: left;
				background: yellow;
			}
			.layout.double .left {
				width: 300px;
				float: left;
				background: red;
				margin-left: -100%;
			}
			.layout.double .right {
				width: 300px;
				float: right;
				background: blue;
				margin-left: -300px;
			}
			.layout.double .center .centent {
				margin: 0 300px;
			}
		</style>
		<article class="left-center-right">
			<div class="center">
				<div class="centent">
					<h2>双飞翼布局</h2>
					1.这是三栏布局的中间部分
					2.这是三栏布局的中间部分
				</div>
			</div>
			<div class="left"></div>
			<div class="right"></div>
		</article>
	</section>

3.利用绝对定位

	<section class="layout absolute">
		<style type="text/css">
			.layout article div {
				height: 100px;
			}
			.layout.absolute .left-center-right {
				position: relative;
				height: 100px;
			}
			.layout.absolute .left-center-right>div {
				position: absolute;
			}
			.layout.absolute .center {
				left: 300px;
				right: 300px;
				background: yellow;
			}
			.layout.absolute .left {
				left: 0;
				width: 300px;
				background: red;
			}
			.layout.absolute .right {
				right: 0;
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>绝对定位解决方案</h2>
				1.这是三栏布局的中间部分
				2.这是三栏布局的中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

4.flexbox布局

	<section class="layout flexbox">
		<style type="text/css">
			.layout article div {
				height: 100px;
			}
			.layout.flexbox .left-center-right {
				display: flex;
			}
			.layout.flexbox .left {
				width: 300px;
				background: red;
			}
			.layout.flexbox .center {
				flex: 1;
				background: yellow;
			}
			.layout.flexbox .right {
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>flexbox解决方案</h2>
				1.这是三栏布局的中间部分
				2.这是三栏布局的中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

5.表格布局

	<section class="layout table">
		<style type="text/css">
			.layout article div {
				height: 100px;
			}
			.layout.table .left-center-right {
				width: 100%;
				display: table;
				/* height: 100px; */
			}
			.layout.table .left-center-right>div {
				display: table-cell;
			}
			.layout.table .left {
				width: 300px;
				background: red;
			}
			.layout.table .center {
				background: yellow;
			}
			.layout.table .right {
				width: 300px;
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>表格布局</h2>
				1.这是三栏布局的中间部分
				2.这是三栏布局的中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>

6.网格布局

	<section class="layout gird">
		<style type="text/css">
			.layout article div {
				height: 100px;
			}
			.layout.gird .left-center-right {
				display: grid;
				width: 100%;
				grid-template-rows: 100px;
				grid-template-columns: 300px auto 300px;
			}
			.layout.gird .left {
				background: red;
			}
			.layout.gird .center{
				background: yellow;
			}
			.layout.gird .right {
				background: blue;
			}
		</style>
		<article class="left-center-right">
			<div class="left"></div>
			<div class="center">
				<h2>网格布局解决方案</h2>
				1.这是三栏布局的中间部分
				2.这是三栏布局的中间部分
			</div>
			<div class="right"></div>
		</article>
	</section>