📝个人主页：爱吃炫迈
💌系列专栏：HTML+CSS
🧑💻座右铭：道阻且长，行则将至💗
圣杯布局
HTML代码
<div class="wrap">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
步骤
- 给最外层容器wrap设置
padding-left: 200px;、padding-right: 200px; - 渲染
content、left、right三个容器
- 都设置浮动
float: left;，脱离文档流； - 设置left和right宽度和高度：
width: 200px;、height: 100px; - 设置center的宽度：
width: 100%;,使其充满容器；高度：height: 100px;
🌸查看效果
- 将left移动到左边空白区
- 先将left拉回第一行，使其覆盖在center的最左侧：
position: relative;、margin-right: -100%;
- 将left相对于center容器向左移100%（也就是
content自身的宽度）left: -200px;
- 将right移动到右边空白区
- 先将right拉回第一行：
position: relative;、margin-left: -200px;
- 将right相对于自身向右移200px：
left: 200px;
🌸最终效果
CSS代码
.wrap {
padding-left: 200px;
padding-right: 200px;
}
.left {
position: relative;
float: left;
left: -200px;
margin-right: -100%;
width: 200px;
height: 200px;
background-color: pink;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: greenyellow;
}
.right {
position: relative;
float: left;
left: 200px;
margin-left: -200px;
width: 200px;
height: 200px;
background-color: pink;
}
双飞翼布局
HTML代码
<div class="wrap">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
步骤
- 渲染
content、left、right三个容器
- 都设置浮动
float: left;，脱离文档流； - 设置left和right宽度和高度：
width: 200px;、height: 200px; - 设置center的宽度：
width: 100%;,使其充满容器；高度：height: 200px;
🌸查看效果
- 将left拉回第一行，使其覆盖在center的最左侧：
margin-right: -100%;
- 将right拉回第一行，使其覆盖在center的最右侧：
margin-left：-200px
🌸最终效果
文章来源：https://www.toymoban.com/news/detail-431515.html
CSS代码
.left {
float: left;
margin-left: -100%;
width: 200px;
height: 200px;
background-color: pink;
}
.center {
float: left;
width: 100%;
height: 200px;
background-color: greenyellow;
}
.right {
float: left;
margin-left: -200px;
width: 200px;
height: 200px;
background-color: pink;
}
小结
圣杯布局和双飞翼布局实现的效果都是相同的，只是在左右容器覆盖在中间容器中时，处理的容器不同而已。圣杯布局在处理左右容器，用相对定位时要注意左右平移的方向是相反的。双飞翼布局处理中间容器时要注意内层容器的内边距。文章来源地址https://www.toymoban.com/news/detail-431515.html
到了这里，关于CSS布局之圣杯布局/双飞翼布局的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
