圣杯布局和双飞翼布局实现方式的区别？

qq_39196605

于 2022-08-08 17:44:57 发布

阅读量126

点赞数

分类专栏：前端文章标签： css html

本文链接：https://blog.csdn.net/qq_39196605/article/details/126232496

版权

前端专栏收录该内容

6 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局实现方式的区别？

答：共同点：

都使用了float
中间部分在文档前面，为了优先加载

区别：

圣杯：
左、中、右三个盒子在一个同一个盒子中，设置外侧盒子的padding，从而留出两侧盒子位置
双飞翼：
左、中、右三个盒子同级，在中间盒子里放一个小盒子，设置小盒子的margin，从而留出两侧盒子位置

具体实现还是有一些区别，如下：

1. 圣杯布局

html代码

// 圣杯布局
<body>
    <div id="header">header</div>
    <div id="container">
        <div id="middle" class="column">middle</div>
        <div id="left" class="column">left</div>
        <div id="right" class="column">right</div>
    </div>
    <div id="footer">footer</div>
</body>

css代码

body{
    margin: 0px;
    padding: 0px;
    min-width: 550px;
}
#header{
    width:100%;
    background-color:darkgrey;
    height: 30px;
}
#container {
    padding-left: 200px;
    padding-right: 150px;
    overflow: hidden;
}
#middle {
    width: 100%;
    background-color: green;
    height: 500px;
}
#left {
    width: 200px;
    margin-left: -100%;
    position: relative;
    right: 200px;
    background-color: red;
    height: 500px;
}
#right {
    width: 150px;
    margin-right: -150px;
    background-color: blue;
    height: 500px;
}
#footer{
    width:100%;
    background-color:darkgrey;
    height: 30px;
}
.column {
    float: left;
}

实现效果：
在这里插入图片描述

2. 双飞翼布局

html 代码：

<div class="wrap">
    <div id="header">header</div>
    <div id="content">
        <div id="middle">
            <div class="middle-inner">
                middle
            </div>
        </div>
        <div id="left">left</div>         
        <div id="right">right</div>
    </div>
    <div id="footer">footer</div>
</div>

css代码：

*{
    margin: 0;
    padding: 0;
}
.wrap{
    min-width: 600px;
}
#header,#footer{
    height: 50px;
    width: 100%;
    background:grey;
}
#left,#right{
    width: 200px;
    height: 200px;
    background: green;
}

#middle{
    background: pink;
    width: 100%;
    float: left;
    height:200px;
}
#content{
    overflow: hidden;
}
.middle-inner{
  margin: 0 200px;
}
#left{
  float: left;
  margin-left: -100%;
}
#right{
  float: left;
  margin-left: -200px;
}

原文链接：https://juejin.cn/post/7072158430294704135
原文链接：https://blog.csdn.net/Dg_Zing/article/details/88321472