共计 2779 个字符，预计需要花费 7 分钟才能阅读完成。
双飞翼布局
实现双飞翼布局的五种方法
- 浮动
- 绝对定位
- flex 布局
- table
- grid
浮动
浮动的实现，就是直接将左右两边的块实现左右浮动，中间实现自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 浮动 </title>
<style>
* {
margin: 0;
padding: 0;
}
section div {height: 200px;}
.left {
width: 300px;
float: left;
background-color: pink;
}
.right {
width: 300px;
float: right;
background-color: blue;
}
.center {background-color: red;}
</style>
</head>
<body>
<section>
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮动布局
</div>
</section>
</body>
</html>绝对定位
实现方法将三块 div 实现绝对定位，将左右两块 div 分别设置 left 和 right 为 0，中间实现 left 和 right 各为左右两边的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 绝对定位 </title>
<style>
* {
margin: 0;
padding: 0;
}
section div {
height: 200px;
position: absolute;
}
.left {
width: 300px;
left: 0;
background-color: pink;
}
.right {
width: 300px;
right: 0;
background-color: blue;
}
.center {
left: 300px;
right: 300px;
background-color: red;
}
</style>
</head>
<body>
<section>
<div class="left"></div>
<div class="center">
absolute 布局
</div>
<div class="right"></div>
</section>
</body>
</html>flex 布局
实现方式：将外层的块级元素设置 flex，将中间的块级元素设置为 flex：1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>flex</title>
<style>
* {
margin: 0;
padding: 0;
}
/* 外边框增加 display：flex */
section {display: flex;}
section div {height: 200px;}
.left {
width: 300px;
background-color: pink;
}
.right {
width: 300px;
background-color: blue;
}
.center {
flex: 1;
background-color: red;
}
</style>
</head>
<body>
<section>
<div class="left"></div>
<div class="center">
flex 布局
</div>
<div class="right"></div>
</section>
</body>
</html>表格布局
实现方式：将外层块级元素设置 display:table，分别设置左右两个块级元素固定宽，中间块级元素自适应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> 表格布局 </title>
<style>
* {
margin: 0;
padding: 0;
}
/* 外边框设置 table 布局，并设置宽度为 100% */
section {
display: table;
width: 100%;
}
section div {
height: 200px;
display: table-cell;
}
.left {
width: 300px;
background-color: pink;
}
.right {
width: 300px;
background-color: blue;
}
.center {background-color: red;}
</style>
</head>
<body>
<section>
<div class="left"></div>
<div class="center">
table 布局
</div>
<div class="right"></div>
</section>
</body>
</html>grid 布局
实现方式：外边框设置 grid 布局，并设置宽度为 100%，设置 grid-template-rows 和 grid-template-columns
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>grid 布局 </title>
<style>
* {
margin: 0;
padding: 0;
}
section {
display: grid;
grid-template-rows: 200px;
grid-template-columns: 300px auto 300px;
width: 100%;
}
.left {background-color: pink;}
.right {background-color: blue;}
.center {background-color: red;}
</style>
</head>
<body>
<section>
<div class="left"></div>
<div class="center">
grid 布局
</div>
<div class="right"></div>
</section>
</body>
</html>
正文完
