圣杯布局

圣杯布局

---

圣杯布局： 要求三栏布局，中间宽度自适应，两边定宽，允许任意列高度最高。这样做的优势是重要的东西放在文本流前面可以优先渲染。
按照常规的想法我们先写三个div在页面当中，分别起名为middle，left，right

//body中的内容
    <div class="container">
		<div class="middle">
			<h4>我是middle</h4>
			<p>我是内容部分</p>
		</div>
		<div class="left">
			<h4>我是left</h4>
			<p>我是left的内容</p>
		</div>
		<div class="right">
			<h4>我是right的内容</h4>
			<p>我是right的内容</p>
		</div>
	</div>

//style中的内容
	*{
			margin:0;
			padding:0;
		}
		header{
			height:40px;
			background-color: #b5c4b1;
			line-height:40px;
			text-align: center;			
			}
		.container{
			text-align: center;
			padding:0 200px 0 200px;

			}
		.middle,.left,.right{
			min-height: 300px;
		}
		.middle{
			background-color:#f8ebd8;
			width:100%;
			}
		.left{
			width:200px;
			background-color: #ead0d1;
			}
		.right{
			width:200px;
			background-color:#9ca8b8;
			}

然后我们就得到了下面这个页面

接下来我们来分析一下如何让left和right分别到middle的两边去？
现在他们都还是块级元素，所以都是独占一行。圣杯布局要让他们都在一行显示，可以使用display变为inline-block，也可以使用浮动脱离标准流。
这里常用的方式是浮动,修改style中的代码

	.middle,.left,.right{
			float: left;
			min-height: 300px;
		}

设置完浮动发现，怎么成了两行？没有在一行上显示？
因为midlle为了实现自适应的效果，已经设置了width:100%独占了一行
这里怎么能让left和right能到上一行去呢？
这里就考虑到盒子的外边距margin了。给left盒子设置margin-left:-220px;可以保证left盒子能移动到上一行去，但是他是在middle盒子的最右边的部分，要让他移动到最左边就要设置margin-left:-100%;当left盒子上去以后，right盒子设置margin-left:-220px;就能够到上一行的位子去了。

最后我们利用定位将左右边栏移动到空白位置中去

我们现在就可以随意拉伸试试

看我们已经实现了圣杯布局
完整代码：https://github.com/yutingbai/html-css-js/blob/master/布局/圣杯.html