CSS实现三栏布局（左边固定、右边固定、中间⾃适应）的五种
⽅式
⼀、float布局
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>float布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
float: left;
width: 200px;
height: 300px;
background-color: aqua;
}
.right {
float: right;
width: 200px;
height: 200px;
background-color: blueviolet;
}
.main {
height: 200px;
background-color: chocolate;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main">⽂字⽂字⽂字⽂字</div>
</body>
</html>
经过测试发现当中间区域⾼度⼩于左右区域任⼀⾼度时效果是正常的，但当⾼度⼤于左右两边⾼度时就会出现如下情况，如下图：
这种情况要怎么解决呢？有两种⽅法可以解决：
（1）在中间区域设置margin-left和margin-right，本⽰例中只要设置左右间距为200px就可以完美解决
（2）在中间区域设置overflow: hidden（原因是：overflow: hidden可以触发bfc（bfc：块级格式化上下⽂），渲染规则：bfc⾥计算⾼度时，浮动的元素也参与计算）
这⾥特别提醒由于我们使⽤了float, 所以为了不影响其他元素的显⽰这⾥需要清除浮动，清除浮动的⽅式有很多⼤家可以⾃⾏搜索使⽤我这⾥使⽤伪元素的⽅式
.main::after{
content:'';
display: block;
clear: both;
}
⼆、Position布局:
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>position布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 300px;
background-color: aqua;
}
.main {
position: absolute;
left: 200px;
top: 0;
right: 200px;
height: 500px;
background-color: chocolate;
overflow: hidden;
}
.right {
position: absolute;
right: 0;
top: 0;
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="left"></div>
<div class="main">⽂字⽂字⽂字⽂字</div>
<div class="right"></div>
</body>
</html>
三、table布局:
table是⼀种常见的布局⽅式，他可以将整个页⾯按照表格的⽅式设置为多⾏多列，但是由于书写table标签⽐较⿇烦尤其是涉及到table内嵌table的时候，所以CSS给我们提供了display: table的⽅式可以让让们⽅便的使⽤table布局, 设置⼦元素为列的属性为display:table-cell
display:table相当于<table>，display:table-cell，就相当于<th><td>
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
display: table;
}
.left,
.
center,
.right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: aqua;
}
.center {
background-color: chocolate;
}
.right {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center">⽂字⽂字⽂字⽂字</div>
<div class="right"></div>
</div>
</body>
</html>
四、弹性(flex)布局:
flex布局是W3C提出了⼀种新的⽅案，可以简便、完整、响应式地实现各种页⾯布局。
当给元素设置display:flex，则该元素就是⼀个flex容器，其⼦元素就是容器成员，称之为flex项⽬，每个项⽬默认按照从左到右⽅式排列。代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>table布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
display: flex;
}
.
left {
width: 200px;
height: 200px;
background-color: aqua;
css布局左边固定右边自适应}
.center {
flex-grow: 1;
background-color: chocolate;
}
.right {
width: 200px;
height: 200px;
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center">⽂字⽂字⽂字⽂字</div>
<div class="right"></div>
</div>
</body>
</html>
五、⽹格(gird)布局:
⽹格它将⽹页划分成⼀个个⽹格，可以任意组合不同的⽹格，做出各种各样的布局。
将属性display值设为grid或inline-grid就创建了⼀个⽹格容器，所有容器直接⼦结点⾃动成为⽹格项⽬。gird提供了 gird-template-columns、grid-template-rows属性让我们设置⾏和列的⾼、宽
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>⽹格(gird)布局</title>
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 100%;
display: grid;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
}
.left {
background-color: aqua;
}
.center {
background-color: chocolate;
}
.right {
background-color: blueviolet;
}
</style>
</head>
<body>
<div class="main">
<div class="left"></div>
<div class="center">⽂字⽂字⽂字⽂字</div>
<div class="right"></div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。