纯css实现三栏式布局

1.相对定位+float+margin负值（圣杯布局）

<div id="parent_rela">
    <h3>使用relative:relative定位（圣杯布局）</h3>  
    <div id="center_rela">我是中间</div>
    <div id = "left_rela">我是左边</div>  
    <div id = "right_rela">我是右边</div>           
</div>

#parent_rela{padding: 0 210px;overflow: hidden;}
#left_rela,#right_rela{width: 200px;height: 100px; background-color: #ffe6b8;position: relative;float: left;}
#left_rela{margin-left: -100%;left: -210px;}
#right_rela{margin-left: -200px;right: -210px;}  
#center_rela{width: 100%;background-color: #eee;height: 100px;float: left;}

先给外层padding留出两侧的空间

---

2.绝对定位

<div id="parent_abso">
    <h3>使用position:absolute定位</h3>  
    <div id = "left">我是左边</div>  
    <div id = "right">我是右边</div>  
    <div id = "center">我是中间</div>           
</div>

#parent_abso{position: relative;}
#left,#right{width: 200px;height: 100px; background-color: #ffe6b8;position: absolute;top:100px;}  
#left{left:0px;}  
#right{right: 0px;}  
#center{margin:0 210px ;background-color: #eee;height: 100px; }

---

3.自身浮动定位法

<h3>使用自身浮动定位法</h3>  
<div id = "left_self">我是左边</div>  
<div id = "right_self">我是右边</div>  
<div id = "center_self">我是中间</div> 

#left_self,#right_self{ width: 200px;height: 100px; background-color: #ffe6b8 }  
#left_self {float: left;}  
#right_self{float: right;}  
#center_self{margin: 0 210px;height: 100px; background-color: #a0b3d6} 

---

4.flex布局

<h3>使用flex布局（兼容性不是很好）</h3>
<div id="parent">
    <div id="center_flex">我是中间</div>
    <div id="left_flex">我是左边</div>
    <div id="right_flex">我是右边</div>
</div>

#left_flex,#right_flex{ width: 200px;height: 100px;background-color: darkorange }  
#right_flex{background-color: lightpink;order: 2;}
#parent{display: flex;}
#center_flex{flex: 1;order:1;margin: 0 10px;background-color: #ffe6b8;}

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0

---

5.margin负值法（双飞翼布局）

<h3>使用margin负值法进行布局（双飞翼布局）</h3>  
<div id = "wrap">  
    <div id = "center">我是中间</div>  
</div>  
<div id = "left_margin">我是左边</div>  
<div id = "right_margin">我是右边</div>

#wrap{ width: 100%;height: 100px; background-color: #fff;float: left;}  
#wrap #center{ margin:0 210px; height: 100px;background-color: #ffe6b8; }  
#left_margin,#right_margin{ float: left;width: 200px;height: 100px;background-color: darkorange }  
#left_margin {margin-left: -100%; background-color: lightpink}  
#right_margin{margin-left: -200px;}

效果图：