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;
}
.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>
浙公网安备 33010602011771号