三栏布局与圣杯布局

三栏布局是一种比较常见的布局，在一些大型网站上也常被使用。通常表现为，两边固定，中间自适应。

常常提及的圣杯布局与双飞翼布局就属于三栏布局的一种。

下面先介绍我常用的两种三栏布局方法：绝对定位法和负边距法以及常提及的圣杯布局

绝对定位法

负边距法

圣杯布局

绝对定位法：

如果你从来没有实现过三栏布局，那么这个方法你很容易自己想出来。

大概思路：写出三栏，左右两栏绝对定位到两边，中间利用margin来找宽度。

<body>
    <div id="left"></div>
    <div id="main"></div>
    <div id="right"></div>
</body>

html,body{margin:0; height:100%;}
#left,#right{position:absolute; top:0; width:200px; height:100%;}
#left{left:0; background:#444444;}
#right{right:0; background:#444444;}
#main{margin:0 210px;height:100%;}

负边距法：

该方法也很好理解，圣杯布局也采用了这种方法。当初学习该方法，参考的是张鑫旭大神的文章

首先先搭出该方法的框架，这个框架与上一个方法不太一样：中间部分要用两层标签表示，也就是在原来的基础上再套一层标签

<body>
	<div class="main">
		<div class="middle">我是c位</div>
	</div>
	<div class="left">left</div>
	<div class="right">right</div>
	
</body>

下面写css

html,body{height: 100%;margin: 0;}
	.left,.right,.main{float: left;}
	.main{width: 100%}
	.middle{margin: 0 210px;}
	.left{width:200px;background-color: #444444 ;margin-left: -100%;}
	.right{width:200px;background-color: #444444 ;margin-left: -200px;}

css我没有给高度。

先看一下效果图

其实这个方法的原理很简单，首先要明确两个观念：1：margin的百分数值取得是父元素

2：三个元素都浮动

我们先看一下没有给left，和right栏负边距的情况：

三个元素都浮动，因为main中间部分为100%，所以同样作为浮动元素的left和right被挤在了图片的位置上。而我们给left设置margin-left：100%，left移动了父

元素的宽度（也是main元素的宽度）。而right只需移动自身的大小，就可以到右栏位置

圣杯布局：

圣杯布局也是三栏布局的一种，于此相像的还有双飞翼布局。文章学习参考这里

圣杯布局有固定的框架：主要有头部，中间部分（分为三栏），尾部

代码如下：

<body>
	<div id="header"></div>
	<div id="container">
  		<div id="center" class="column">center</div>
  		<div id="left" class="column">left</div>
  		<div id="right" class="column">right</div>
  	</div>
  	<div id="footer"></div>
</body>

css部分：

#header{width: 100%;height: 40px;background-color: #252525}
#container{	
	padding-left: 200px;
	padding-right: 150px;
}
#footer{width: 100%;height: 20px;background-color:#252525 ;clear: both;}
.column{float: left;position: relative;}
#center{width: 100%;}
#left{width: 200px;margin-left: -100%;left:-200px;background-color: #4095B5}
#right{width: 150px;margin-left: -150px;right:-150px;background-color: #4095B5}

头部和尾部就是正常的div，不过尾部需要帮助我们清除一下浮动。

这里的三栏布局，利用定位+负边距。首先将中间部分padding，已留出左栏和右栏的位置。之后再利用负边距，将三栏在同一水平线上，最后利用定位，把左栏右栏移到padding中，就实现一个圣杯布局的框架！