1.float布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>浮动实现三栏布局</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.left{
float: left;
width: 300px;
height: 100px;
background: #631D9F;
}
.right{
float: right;
width: 300px;
height: 100px;
background: red;
}
.center{
margin-left: 300px;
margin-right: 300px;
}
.main::after{
content:'';
display: block;
clear: both;
}
</style>
</head>
<body>
<article class="main">
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中
<h2>浮动布局</h2>
</div>
</article>
</body>
</html>
2.Position定位
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent {
position: relative;
width: 100%;
height: 200px;
}
.left {
position: absolute;
width: 200px;
background: #007bff;
height: 200px;
}
.center {
position: absolute;
background: #7b007b;
height: 200px;
left: 200px;
right: 200px;
}
.right {
right: 0;
position: absolute;
width: 200px;
background: yellow;
height: 200px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
3.table布局
.main{
width: 100%;
display: table;
}
.left,.center,.right{
display: table-cell;
}
.left{
width: 300px;
}
.center{
background-color: blue;
}
.right{
width: 300px;
background-color: red;
}
4.弹性(flex)布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>position</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.parent > *{
height: 200px;
}
.parent {
width: 100%;
height: 200px;
display: flex;
}
.left {
background: yellow;
width: 300px;
}
.center {
background: #7b007b;
flex: 1;
}
.right {
background: #00aa88;
width: 300px;
}
</style>
</head>
<body>
<div class="parent">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
5.网格(grid)布局
.div{
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
