<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>layout</title>
<style media="screen">
html *{
margin:0;
padding: 0;
}
.layout{
margin-top:10px;
}
.layout article div{
min-height: 100px;
}
</style>
</head>
<body>
<section class="layout float">
<style media="screen">
.layout.float .left{
width:300px;
float:left;
background: red;
}
.layout.float .right{
width: 300px;
float:right;
background: blue;
}
.center{
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动解决方案</h1>
<h1>这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分</h1>
</div>
</article>
</section>
//注意：不能是左中右结构
<section class="layout absolute">
<style>
.layout.absolute .left-center-right div{
position: absolute;
}
.layout.absolute .left{
width:300px;
left:0;
background: red;
}
.layout.absolute .right{
width: 300px;
right:0;
background: blue;
}
.center{
left:300px;
right: 300px;
background: yellow;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
<h1>这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分这是中间部分</h1>
</div>
<div class="right"></div>
</article>
</section>
方法3：flexbox解决方案
<section class="layout flexbox">
<article class="left-center-right">
<div class="left"></div>
<div class="center">
<h1>flexbox解决方案</h1>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
方法4 表格布局
方法5 grid网格布局
grid布局主要属性：
grid-template-columns：//竖向排列
grid-template-rows：//横向排列
