双飞翼(圣杯)布局:左右两边定宽 中间自适应
一、定位
代码段:(效果图在最下面)
实现思路:1.子绝父相,父盒子设置左右 padding 值 。2.给左右盒子的 width 设置父盒子的 padding 值,然后分别定位到 padding 处.。
<!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>双飞翼(圣杯)布局</title>
<style>
header {
background-color: lightpink;
height: 10vh;
text-align: center;
}
footer {
background-color: lightgreen;
height: 10vh;
text-align: center;
}
/* 1.定位 */
.father {
height: 400px;
background-color: pink;
position: relative;
padding: 0 200px;
}
.left,
.right {
width: 200px;
height: 400px;
background-color: yellow;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
background-color: blue;
height: 400px;
}
/* 2.flex */
/* .father {
height: 400px;
background-color: pink;
display: flex;
}
.left {
width: 200px;
height: 400px;
background-color: yellow;
}
.right {
width: 200px;
height: 400px;
background-color: yellow;
}
.center {
flex: 1;
background-color: lightblue;
} */
/* 3.bfc */
</style>
</head>
<body>
<!-- 双飞翼(圣杯)布局 左右两边定宽 中间自适应 -->
<!-- 3种方式 定位 flex bfc -->
<header></header>
<div class="father">
<div class="left">定宽</div>
<div class="center">自适应</div>
<div class="right">定宽</div>
</div>
<footer></footer>
</body>
</html>
二、Flex
代码段:
实现思路:给父盒子设置display:flex,左右设置想要的宽度,中间自适应的设置为flex:1即可。
.father {
height: 400px;
background-color: pink;
display: flex;
}
.left {
width: 200px;
height: 300px;
background-color: yellow;
}
.right {
width: 200px;
height: 300px;
background-color: yellow;
}
.center {
flex: 1;
background-color: blue;
}
三、bfc
代码段:
实现思路:左右固定宽高,进行浮动 ;中间 overflow: hidden。
<!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>双飞翼(圣杯)布局</title>
<style>
header {
background-color: lightpink;
height: 10vh;
text-align: center;
}
footer {
background-color: lightgreen;
height: 10vh;
text-align: center;
}
/* 1.定位 */
/*
.father {
height: 400px;
background-color: pink;
position: relative;
padding: 0 200px;
}
.left,
.right {
width: 200px;
height: 400px;
background-color: yellow;
position: absolute;
top: 0;
}
.left {
left: 0;
}
.right {
right: 0;
}
.center {
background-color: blue;
height: 400px;
} */
/* 2.flex */
/* .father {
height: 400px;
background-color: pink;
display: flex;
}
.left {
width: 200px;
height: 400px;
background-color: yellow;
}
.right {
width: 200px;
height: 400px;
background-color: yellow;
}
.center {
flex: 1;
background-color: lightblue;
} */
/* 3.bfc */
.father {
height: 400px;
background-color: pink;
}
.left {
float: left;
width: 200px;
height: 400px;
background-color: palegreen;
}
.right {
float: right;
width: 200px;
height: 400px;
background-color: paleturquoise;
}
.center {
height: 400px;
background-color: lightskyblue;
overflow: hidden;
}
</style>
</head>
<body>
<!-- 双飞翼(圣杯)布局 左右两边定宽 中间自适应 -->
<!-- 3种方式 定位 flex bfc -->
<header></header>
<!-- <div class="father">
<div class="left">定宽</div>
<div class="center">自适应</div>
<div class="right">定宽</div>
</div> -->
<!-- 注意:left 和 right 必须放在 center 前面 -->
<div class="father">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
<footer></footer>
</body>
</html>
效果图: