<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding:0;
margin: 0;
}
.layout {
margin-top: 20px;
}
.layout article div {
min-height:100px;
}
</style>
</head>
<body>
浮动
<section class="layout float">
<style>
.fl{
float:left;
width:300px;
background-color: red;
}
.fr {
float:right;
width:300px;
background-color: aqua;
}
article div:last-of-type {
background-color: yellow;
}
</style>
<article>
<div class="fl"></div>
<div class="fr"></div>
<div>浮动方案</div>
</article>
</section>
定位
<section class="layout position">
<style>
.position div {
position: absolute;
}
.position article .left {
left:0;
width:300px;
background-color: red;
}
.position article .center {
left:300px;
right:300px;
background-color:yellow ;
}
.position article .right {
right:0;
width: 300px;
background-color: aqua;
}
</style>
<article>
<div class="left"></div>
<div class="center">绝对定位方案</div>
<div class="right"></div>
</article>
</section>
flexbox
<section class="layout flex">
<style>
.flex article {
display: flex;
flex-direction: row;
margin-top: 140px;
}
.flex article .left {
width:300px;
background-color: red;
}
.flex article .center {
flex:1;
background-color:yellow ;
}
.flex article .right {
width: 300px;
background-color: aqua;
}
</style>
<article>
<div class="left"></div>
<div class="center">flex方案</div>
<div class="right"></div>
</article>
</section>
table
<section class="layout table">
<style>
.table article {
width: 100%;
height: 100px;
display: table;
}
.table article div {
display: table-cell;
}
.table article .left {
width:300px;
background-color: red;
}
.table article .center {
background-color:yellow ;
}
.table article .right {
width:300px;
background-color: aqua;
}
</style>
<article>
<div class="left"></div>
<div class="center">table方案</div>
<div class="right"></div>
</article>
</section>
网格
<section class="layout grid">
<style>
.grid article{
display: grid;
width: 100%;
网格中的行数及行的高度
grid-template-rows: 100px;
每列宽度
grid-template-columns: 300px auto 300px;
}
.grid article .left {
background-color: red;
}
.grid article .center {
background-color:yellow ;
}
.grid article .right {
background-color: aqua;
}
</style>
<article>
<div class="left"></div>
<div class="center">网格方案</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
