1、浮动布局
.layout.float .left{
float: left;
width: 300px;
background: red;
}
.layout.float .right{
float: right;
width: 300px;
background: blue;
}
.layout.float .center{
background: yellow;
}
2、绝对布局
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left{
left : 0;
width : 300px;
background : red;
}
.layout.absolute .center{
left : 300px;
right : 300px;
background : yellow;
}
.layout.absolute .right{
right:0;
width:300px;
background:blue;
}
3、弹性布局
.layout.flexbox{
margin-top : 140px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left{
width : 300px;
background : red;
}
.layout.flexbox .center{
flex : 1;
background : yellow;
}
.layout.flexbox .right{
width : 300px;
background : blue;
}
4、表格布局
.layout.table .left-center-right {
width : 100%;
display : table;
height: 100px;
}
.layout.table .left-center-right>div {
display : table-cell;
}
.layout.table .left {
width : 300px;
background : red;
}
.layout.table .center {
background : yellow;
}
.layout.table .right {
width : 300px;
background : blue;
}
5、网格布局
.layout.grid .left-center-right {
display : grid;
width : 100%;
grid-template-rows: 100px;
grid-template-columns : 300px auto 300px;
}
.layout.grid .left{
background : red;
}
.layout.grid .center{
background : yellow;
}
.layout.grid .right{
background : blue;
}
6、全部代码部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layout</title>
<style media="screen">
html *{
padding: 0;
margin: 0;
}
.layout {
margin-top : 20px;
}
.layout article div{
min-height : 100px;
}
</style>
</head>
<body>
<!-- 1 浮动布局 -->
<section class ="layout float">
<style media = "screen">
/* 通过把多个类选择器链接在一起，仅可以选择同时包含这些类名的元素（类名的顺序不限）
.layout.float (两者之间无空格)
例如： .layout.float { color: red; }
<div class="layout float">被选择的元素</div> */
.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>
<p>1、这是三栏布局中间部分</p>
<p>2、这是三栏布局中间部分</p>
</div>
</article>
</section>
<!-- 2 绝对布局 -->
<section class = "layout absolute">
<style>
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left{
left : 0;
width : 300px;
background : red;
}
.layout.absolute .center{
left : 300px;
right : 300px;
background : yellow;
}
.layout.absolute .right{
right:0;
width:300px;
background:blue;
}
</style>
<article class = "left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位解决方案</h1>
<p>1、这是三栏布局绝对定位中间部分</p>
<p>2、这是三栏布局绝对定位中间部分</p>
</div>
</article>
</section>
<!-- 3 弹性布局 -->
<section class="layout flexbox">
<style>
.layout.flexbox{
margin-top : 140px;
}
.layout.flexbox .left-center-right {
display: flex;
}
.layout.flexbox .left{
width : 300px;
background : red;
}
.layout.flexbox .center{
flex : 1;
background : yellow;
}
.layout.flexbox .right{
width : 300px;
background : blue;
}
</style>
<article class = "left-center-right">
<div class = "left"></div>
<div class = "center">
<h2>flexbox解决方案</h2>
<p>1、这是三栏布局flexbox中间部分</p>
<p>2、这是三栏布局flexbox中间部分</p>
</div>
<div class = "right"></div>
</article>
</section>
<!-- 4 表格布局 -->
<section class="layout table">
<style>
.layout.table .left-center-right {
width : 100%;
display : table;
height: 100px;
}
.layout.table .left-center-right>div {
display : table-cell;
}
.layout.table .left {
width : 300px;
background : red;
}
.layout.table .center {
background : yellow;
}
.layout.table .right {
width : 300px;
background : blue;
}
</style>
<article class ="left-center-right">
<div class = "left"></div>
<div class = "center">
<h2>表格布局</h2>
<p>1、这是三栏布局表格布局中间部分</p>
<p>2、这是三栏布局表格布局中间部分</p>
</div>
<div class = "right"></div>
</article>
</section>
<!-- 5 网格布局 -->
<section class = "layout grid">
<style media="screen">
.layout.grid .left-center-right {
display : grid;
width : 100%;
grid-template-rows: 100px;
grid-template-columns : 300px auto 300px;
}
.layout.grid .left{
background : red;
}
.layout.grid .center{
background : yellow;
}
.layout.grid .right{
background : blue;
}
</style>
<article class = "left-center-right">
<div class = "left"></div>
<div class = "center">
<h2>网格布局</h2>
<p>1、这是三栏布局网格布局中间部分</p>
<p>2、这是三栏布局网格布局中间部分</p>
</div>
<div class = "right"></div>
</article>
</section>
</body>
</html>
7、效果图
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。