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

最新推荐文章于 2023-05-08 10:10:46 发布

Arlisol

最新推荐文章于 2023-05-08 10:10:46 发布

阅读量1k

点赞数

分类专栏： Web前端文章标签：圣杯布局双飞翼布局前端实现区别

本文链接：https://blog.csdn.net/dg_zing/article/details/88321472

版权

Web前端专栏收录该内容

22 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局都是为了左右两栏固定宽度，中间部分自适应的布局效果。
但是，具体实现还是有一些区别，如下：
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代码：

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

css代码：

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

实现效果：

其实他们的实现方案大体相同，都是三栏全部float:left浮动，区别在于解决中间栏div的内容不被遮挡上，圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话），而双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。大概可以用下面这张图表示：
圣杯布局和双飞翼布局的区别

Arlisol

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
圣杯布局和双飞翼布局的实现和区别

圣杯布局和双飞翼布局都是为了左右两栏固定宽度，中间部分自适应的布局效果。但是，具体实现还是有一些区别，如下：1. 圣杯布局html代码：&lt;body&gt; &lt;div id="header"&gt;header&lt;/div&gt; &lt;div id="container"&gt; &lt;div id="middle"
复制链接

扫一扫