两栏布局
概述：
两栏布局实现效果就是将页面分割成左右宽度不等的两列，宽度较小的列固定宽度，剩余宽度由另一列撑满。两栏布局往往是以一个确定宽度的一栏和一个自适应的一栏并排展示存在
1、float + margin-left
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
overflow: hidden;
}
.left {
float: left;
width: 200px;
background-color: rgb(156, 244, 247);
height: 400px;
}
.right {
margin-left: 210px;
background-color: rgb(247, 212, 228);
height: 400px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div> -->
</body>
</html>2、flex弹性布局实现
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
display: flex;
}
.left {
width: 100px;
background-color: rgb(156, 244, 247);
}
.right {
/* flex:1;相当于 flex-grow: 1; flex-shrink: 1; flex-basis: 0%; */
flex: 1;
background-color: rgb(247, 212, 228);
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
</div>
</body>
</html>三栏布局
概述：
三栏布局按照左中右的顺序进行排列，通常中间列最宽，左右两列次之
1、两边 float，中间 margin
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
overflow: hidden;
}
.left,.right,.middle{
height: 200px;
}
.left{
float: left;
width: 200px;
background-color: #de7575;
}
.middle{
margin-left:220px;
margin-right:220px;
background-color: #e177c8;
}
.right{
float: right;
width: 200px;
background-color: #8ad0e3;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="right">右边</div>
<!-- 注意中间写在最后 -->
<div class="middle">中间</div>
</div>
</body>
</html>2、两边 absolute，中间 margin
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
position: relative;
}
.left,.right,.middle{
height: 200px;
}
.left{
position: absolute;
left:0;
top:0;
background-color: #eec37a;
width: 200px;
}
.right{
position: absolute;
right:0;
top:0;
background-color: #92ed9f;
width: 200px;
}
.middle{
background-color: #8a78d7;
margin: 0 220px;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>3、flex弹性布局实现
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
display: flex;
}
.left,
.right,
.middle {
height: 200px;
}
.left {
width: 200px;
background-color: aquamarine;
}
.right {
width: 120px;
background-color: rgb(233, 181, 143);
}
.middle {
background-color: rgb(138, 192, 236);
width: 100%;
/* 若要中间和两边有间距添加以下代码 */
/* margin: 0 20px; */
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>4、grid网格布局实现
效果：
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
display: grid;
width: 100%;
/* 定义每一列的列宽 */
grid-template-columns: 300px auto 300px;
}
.left,
.right,
.middle {
height: 200px;
}
.left{
background-color: #e0e66e;
}
.middle{
background-color: #abf58c;
}
.right{
background-color: #f09cd8;
}
</style>
</head>
<body>
<div class="box">
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
</div>
</body>
</html>