2022-09-01 什么是双飞翼布局?什么是圣杯布局?如何实现双飞翼布局和圣杯布局?它们有什么区别?

前端OnTheRun

已于 2023-03-31 19:50:05 修改

阅读量152

点赞数

分类专栏：知识点笔记文章标签： css css3 三栏布局 html 浮动

于 2022-09-01 15:00:44 首次发布

本文链接：https://blog.youkuaiyun.com/rowlet/article/details/126643608

版权

本文介绍了CSS布局中的圣杯布局和双飞翼布局，详细阐述了它们的效果、要求及实现方式。圣杯布局通过浮动、弹性盒、定位和网格布局实现三栏结构，而双飞翼布局则在中间栏内部添加额外div来解决内容显示问题。这两种布局都实现了两侧固定宽度，中间自适应的页面设计。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

文章目录

一.圣杯布局

1.圣杯布局的效果和要求

效果

在这里插入图片描述

要求

头部和底部固定高度,宽度占100%
中间的container是一个三栏布局,即左右固定宽高,中间自适应
container的高度要占到页面的大部分

2.圣杯布局的实现方式[重要]

2.1.使用浮动实现圣杯布局

思路

step1:设置头部和底部的样式
step2:设置container的三列布局:子元素都设置浮动和相对定位,注意要把center放最前,同时footer要清除浮动
step3:container的左右子元素设置固定宽度,中间元素宽度设置为100%
step4:此时左右子盒子被挤压到下一行,left要设置margin-left:-100%让它回到上一行
step5:left移上去后会遮挡center的内容,需为container父盒子设置左右padding分别为left和right的宽度
step6:把右侧right也提上去

代码

<style>
    * {
    
        margin: 0;
        padding: 0;
    }
    /* step1:设置头部和底部的样式 */
    .header,.footer {
    
        background: #339999;
        text-align: center;
        height: 50px;
        line-height: 50px;
    }
    /* footer要清除浮动 */
    .footer {
    
        clear: both;
    }
    /* step2:设置container的三列布局:子元素都设置浮动和相对定位 */
    .container {
    
      /* step5:left移上去后会遮挡center的内容,
      需在container设置左右padding分别为left和right的宽度 */
        padding-left: 200px;
        padding-right: 200px;
        text-align: center;
        line-height: 100px;
    }
    /* step3:container的左右子元素设置固定宽度,中间元素宽度设置为100% */
    .container>*{
    
      width: 200px;
      height: 100px;
      float:left;
      position: relative;
    }
    .center {
    
        background: #336666;
        width: 100% !important;
        position: relative;
    }
    .left {
    
        background: #336699;
        /* step4:此时左右子盒子被挤压到下一行,left要设置margin-left:-100%让它回到上一行 */
        margin-left: -100%;
        right: 200px;
    }
    .right {
    
        background