CSS —— 5种方式实现三栏布局

<style type="text/css">
  .useFloat{
	margin-top: 10px;
  }
  .useFloat>div{
	height: 100px;
	line-height: 100px;
  }
  .left1{
	width: 300px;
	float: left;
	background-color: #7FFFD4;
  }
  .right1{
	width: 300px;
	float: right;
	background-color: #FA8072;
  }
  .center1{
	background-color: #FAEBD7;
	margin-left: 300px;
	margin-right: 300px;
  }
</style>
<div class="useFloat">
	<div class="left1">使用float的left</div>	
	<div class="right1">使用float的right</div>
	<div class="center1">使用float的center</div>
</div>

##2.使用position

<style type="text/css">
.usePosition{
	position: relative;
	margin-top: 10px;
	height: 100px;
}
.usePosition>div{
	height: 100px;
	line-height: 100px;
}
.left2{
	width: 300px;
	position: absolute;
	left: 0;
	background-color: #7FFFD4;
}
.right2{
	width: 300px;
	position: absolute;
	right: 0;
	background-color: #FA8072;
}
.center2{
	position: absolute;
	left: 300px;
	right: 300px;
	background-color: #FAEBD7; 
}
</style>
<div class="usePosition"> 
	<div class="left2">使用position的left</div>
	<div class="right2">使用position的right</div>
	<div class="center2">使用position的center</div>
</div>

##3.使用flex

<style type="text/css">
.useFlex{
	margin-top: 10px;
	display: flex;
}
.useFlex>div{
	height: 100px;
	line-height: 100px;
}
.left3{
	width: 300px;
	background-color: #7FFFD4;
}
.right3{
	width: 300px;
	background-color: #FA8072;
}
.center3{
	flex: 1;
	background-color: #FAEBD7;
}
</style>
<div class="useFlex">
	<div class="left3">使用flex的left</div>
	<div class="center3">使用flex的center</div>
	<div class="right3">使用flex的right</div>			
</div>

##4.使用table

<style type="text/css">
.useTable{
	display: table;
	width: 100%;
	margin-top: 10px;
	height: 100px;
	line-height: 100px;
}
.useTable>div{
	height: 100px;
}
.left4,.center4,.right4{
	display: table-cell;
}
.left4{
	width: 300px;
	background-color: #7FFFD4;
}
.center4{
	background-color: #FAEBD7;
}
.right4{
	width: 300px;
	background-color: #FA8072;
}
</style>
<div class="useTable">
	<div class="left4">使用table的left</div>
	<div class="center4">使用table的center</div>
	<div class="right4">使用table的right</div>
</div>

##5.使用grid

<style type="text/css">
.useGrid{
	display: grid;
	grid-template-rows: 100px;
	grid-template-columns: 300px auto 300px;
	margin-top: 10px;
	line-height: 100px;
}
.left5{
	background-color: #7FFFD4;
}
.center5{
	background-color: #FAEBD7;
}
.right5{
	background-color: #FA8072;
}
</style>
<div class="useGrid">
	<div class="left5">使用grid的left</div>
	<div class="center5">使用grid的center</div>
	<div class="right5">使用grid的right</div>
</div>