双飞翼布局
实现双飞翼布局的五种方法
- 浮动
- 绝对定位
- 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>
发表回复