前端：三栏布局基本方案及写法

题目：写出三栏布局，其中左栏，右栏各为300px,中间自适应

1、浮动float 解决方案

<section class="layout float">
	<style>
		.layout.float .left{
			float: left;
			width: 300px;
			background: red;
		}
		.layout.float .right{
			float: right;
			width: 300px;
			background: blue;
		}
		.layout.float .center{
			background: pink;
		}
	</style>
	<article class="left-right-center">
		<div class="left"></div>
		<div class="right"></div>
		<div class="center">
			<h1>浮动解决</h1>
			1.这是三栏布局，中间自适应
			2.2侧固定宽度300px
			3.固定高度100px
		</div>
	</article>
</section>

2、绝对定位 解决方案

<section class="layout absolute">
	<style>
		.layout.absolute .left-center-right>div{
			position: absolute;
		}