多种方法实现左右固定，中间自适应的CSS布局

布局是面试中常问的问题，尤其是这类的题目，怎么答才好呢？

大多数人的第一个方法是浮动，没错，浮动。第二个方法呢？你回答定位，没错。第三个方法呢？.... 第四个方法呢？第五个方法呢？....

其实能想起来两个方法的人，这道题已经不及格了。所以呀，我来说几种方法吧。

随便多说一点，如果你懂语意化开发并且简历中提到，怎么让面试官知道呢？假如你写了个界面，全是div，你简历中提到的语意化开发在哪呢？你是面试官你会怎么想?

以下代码用语意化书写

第一种方法：浮动

最常见的，不说了

	<section class="layout float">
		<style type="text/css">
			.layout.float .left{
				float: left;
				width: 300px;
				background: red;
			}
			.layout.float .right{
				float: right;
				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">
				<h2>浮动解决方案</h2>
				1.这是三栏布局中间部分
				2.这是三栏布局中间部分
			</div>
		</article>
	</section>

第二种方法：定位

不多说

	<section class="layout absolute">
		<style type="text/css">
			.layout.absolute .left-center-right>div{
				position: absolute;
			}
			.layout.absolute .left{
				left: 0px;
				width: 300px;
				background: red;
			}
			.layout.absolute .center{
				left: 300px;
				right: 300px;
				background: yellow;
			}
			.layout.absolute .right{
				right: 0px;
				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>

第三中方法：flex布局

其实稍微想一下就能想到这个flex布局，article的display设置为flex，左右div宽度固定，中间div的flex属性设置为1，让其自动填充剩下的空间

	<section class="layout flexbox">
		<style type="text/css">
			.layout.flexbox{
				margin-top: 140px;
			}
			.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>

第四种方法：表格布局

这种方法也不难想到，移动端有了flex这种神器，table-cell就有点落伍了。方法就是将article的display设置成table，article下的所有div的display设置成table-cell，把不需要自适应的div给个宽度就可以了。

顺便说以下，table表格中的单元格最大的特点之一就是同一行列表元素都等高，所以等高布局就可以用到了。

代码在这

	<section class="layout table">
		<style type="text/css">
			.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>

第五种方法：网格布局

这种不太常用，不过用过的同学想起来也不难，既然是网格布局，那就把article的display设置为grid呗，既然是网格，那就要有行和列？既然有行和列，就可以设置行和列的宽高吧？所以这两个属性就来了grid-template-rows和grid-template-columns，不懂的可以看看下面的这个文章

http://blog.csdn.net/iefreer/article/details/50544261

	<section class="layout grid">
		<style type="text/css">
			.layout.grid .left-center-right{
				display: grid;
				width: 100%;
				grid-template-rows: 100px;
				grid-template-columns:300px auto 300px;
			}
			.layout.grid .left{
				background: red;
			}
			.layout.grid .center{
				background: yellow;
			}
			.layout.grid .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>