三栏布局总结

前言：在看了圣杯和双飞翼之后的自我实现

1.flex布局实现

HTML结构：
<div class='app'>
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
CSS样式：
.app {
	display: flex;
}
.left, .right {
	width: 200px;
}
.center {
	flex: 1;
}

2.浮动实现

HTML结构：

<div class='app'>
  <div class="left">left</div>
  <div class="right">right</div>
  <div class="center">center</div>
</div>
CSS结构：
.app {
	overflow: hidden;
}
.left 
	float: left;
	width: 200px;
}
.right {
	float: right;
	width: 200px;
}
.center {
	margin: 0 200px;
}

3.绝对定位实现

HTML结构：

<div class="contain">
  <div class="left">left</div>
  <div class="center">center</div>
  <div class="right">right</div>
</div>
CSS结构：

.contain {
  position: relative;
}
.left {
  position: absolute;
  width: 200px;
  height: 200px;
  left: 0;
  top: 0;
}
.right {
  position: absolute;
  width: 200px;
  height: 200px;
  right: 0;
  top: 0;
}
.center {
  margin: 0 200px;
  height: 200px;
}

总结就是让两边固定宽度，让中间的占据剩下的宽度即可