页面布局

在这里插入图片描述

<!--假设高度已知，写出三栏布局，其中左栏、右栏宽度各位300px，中间自适应-->		
		<section class="layout float">
			<style type="text/css">
				.layout article div{
					min-height: 100px;
				}
				.layout.float .left{
					float: left;
					width: 300px;
					background: red;
				}
				.layout.float .right{
					float: right;
					width: 300px;
					background: blue;
				}
				.layout.float .center{
					
					background: yellow;
				}
			</style>
			<article class="left-right-center">
				<div class="left"></div>
				<div class="right"></div>
				<div class="center">
					<h1>浮动解决方案</h1>
					1.这是三栏布局
					2.这是中间部分
				</div>
			</article>
		</section>