三栏布局也可以有多种方法包括flex,position和float等
<!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>
* {
padding: 0;
margin: 0;
border: 0;
}
.main {
display: flex;
position: relative;
width: 100vw;
justify-content: space-around;
}
.left {
width: 200px;
height: 200px;
background-color: pink;
}
.center {
flex: 1;
width: 100%;
height: 200px;
background-color: hotpink;
}
.right {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
</body>
</html>
其他方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style type="text/css">
/*三栏布局一般指的是 页面种一共右三栏,左右两栏宽度固定,中间自适应的布局,一共有5种方法
这里以左边宽度100px 右边宽度100px
*/
* {
margin: 0;
padding: 0;
}
.left {
height: 200px;
background-color: blueviolet;
margin-bottom: 10px;
}
.middle {
height: 200px;
background-color: chartreuse;
margin-bottom: 10px;
}
.right {
height: 200px;
background-color: crimson;
margin-bottom: 10px;
}
/*方法一 绝对定位 左右设置距离 中间设置外边框*/
.outer1 {
position: relative;
}
.outer1 .left {
position: absolute;
left: 0;
width: 100px;
}
.outer1 .right {
position: absolute;
top: 0;
right: 0;
width: 200px;
}
.outer1 .middle {
margin-left: 100px;
margin-right: 200px;
}
/*方法二 flex布局 flex属性默认是0 1 auto*/
.outer2 {
display: flex;
}
.outer2 .left {
width: 100px;
}
.outer2 .right {
width: 200px;
}
.outer2 .middle {
flex: 1;
}
/*方法三 利用浮动 左右浮动 中间margin*/
.outer3 .left {
float: left;
width: 100px;
}
.outer3 .right {
float: right;
width: 200px;
}
.outer3 .middle {
margin-left: 100px;
margin-right: 200px;
}
/* 方法四 圣杯布局 首先三个浮动 然后放在一个盒子里通过padding 来预留位置
通过margin-left来进行移动(左边是-100% 右边是-200px) 然后通过相对定位移动*/
.outer4 {
padding: 0 200px 0 100px;
}
.outer4 .middle {
float: left;
width: 100%;
}
.outer4 .left {
float: left;
width: 100px;
margin-left: -100%;
position: relative;
left: -100px;
}
.outer4 .right {
float: left;
width: 200px;
margin-left: -200px;
position: relative;
left: 200px;
}
/*双飞翼布局 同样是通过浮动让三者在同一行
通过在内容外面加个边框 设置margin-left right 来预留位置 左边和右边的元素通过 margin-left来移动 左边移动margin-left大小 右边移动元素的内容*/
.outer5 .wrapper {
width: 100%;
float: left;
}
.outer5 .left {
width: 100px;
float: left;
margin-left: -100%;
}
.outer5 .right {
width: 200px;
float: left;
margin-left: -200px;
}
.outer5 .middle {
margin-left: 100px;
margin-right: 200px;
}
</style>
</head>
<body>
<div class="outer outer1">
<div class="left">1-left</div>
<div class="middle">1-middle</div>
<div class="right">1-right</div>
</div>
<div class="outer outer2">
<div class="left">2-left</div>
<div class="middle">2-middle</div>
<div class="right">2-right</div>
</div>
<div class="outer outer3">
<div class="left">3-left</div>
<div class="right">3-right</div>
<div class="middle">3-middle</div>
</div>
<div class="outer outer4">
<div class="middle">圣杯-middle</div>
<div class="left">圣杯-left</div>
<div class="right">圣杯-right</div>
</div>
<div class="outer outer5">
<div class="wrapper">
<div class="middle">圣杯-middle</div>
</div>
<div class="left">圣杯-left</div>
<div class="right">圣杯-right</div>
</div>
</body>
</html>
自己多写代码才能掌握更牢固。加油!