经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应

叁歲伎倆 2022-10-16 13:20 219阅读 0赞

# 经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应 #

*  圣杯布局
 *  双飞翼布局
 *  flex布局

其实就是左右固定，中间自适应

### 圣杯布局：浮动和负margin ###

就像一个对称的杯子，由中间和两边的把儿布局

<style>
            html,body{ 
                height: 100%;
                overflow: hidden;
            }
            .container{ 
                height: 100%;
                padding: 0 200px;/*宽度为200 因为left和right左右两边的宽度都为200*/
            }
            .left,
            .right{ 
                width: 200px;
                min-height: 200px;
                background: lightblue;
            }
            .center{ 
                width: 100%;
                min-height: 400px;
                background:lightcoral;
            }
            .left,
            .center,
            .right{ 
                float: left;
            }
            .left{ 
                margin-left: -100%;
                position: relative;
                left: -200px;
            }
            .right{ 
                margin-right:-200px;
            }
        </style>
    </head>
    <body>
        <div class="container clearfix">
            <div class="center"></div>
            <div class="left"></div>
            <div class="right"></div>
        </div>
    </body>

过程解析+图解析  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]  
![在这里插入图片描述][20210530142241603.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]  
![在这里插入图片描述][20210530142431679.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 2]

### 双飞翼布局 ：浮动+负margin ###

就像一个人长了一双翅膀，身体是一体，但是翅膀是额外的，可要可不要  
于是就有了下面这个布局

<div class="container">
       <div class="center"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>

全部代码为

<style>
            html,body{ 
                height: 100%;
                overflow: hidden;
            }
            .container,
            .left,
            .right{ 
                float: left;
            }
            .container{ 
                width: 100%;
            }
            .container .center{ 
                margin: 0 200px;
                min-height: 400px;
                background: lightcoral;
            }
            .left,
            .right{ 
                width: 200px;
                min-height: 200px;
                background: lightgoldenrodyellow;
            }
            .left{ 
                margin-left: -100%;
            }
    
            .right{ 
                margin-left: -200px ;
            }
        </style>
    </head>
    <body class="clearfix">
        <div class="container">
            <div class="center"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </body>

这个的过程解析和上图差不多，可以自己分析一下

flex布局  
以`flex:0 0 200px;`为例  
flex是一个缩写的属性，第一个值是放大的比例，  
第二个是缩小的比例  
第三个是在整个容器内你占空间的大小  
所以left和right的大小就有了，就是200px。  
flex的值为1 就是把剩余空间全占了

<style>
            html,
            body{ 
                overflow: hidden;
            }
            .container{ 
                display: flex;
                justify-content: space-between;
                height: 100%;
            }
            .left,
            .right{ 
                /* flex是一个缩写的属性，第一个值是放大的比例， 第二个是缩小的比例 第三个是在整个容器内你占空间的大小 所以left和right的大小就有了，就是200px*/
                flex:0 0 200px;
                height: 200px;
                background: lightsalmon;
            }
            .center{ 
                /* flex的值为1 就是把剩余空间全占了 */
                flex: 1;
                min-height: 400px;
                background: lightseagreen;
            }
        </style>
    </head>
    <body>
        <div class="container">
    
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    
    </body>

最后补充一种定位实现

<style>
            html,
            body{ 
                height: 100%;
                overflow: hidden;
            }
            .container{ 
                position: relative;
                height: 100%;
            }
            .left,
            .right{ 
                position: absolute;
                top:0;
                width: 200px;
                min-height: 200px;
                background: lightseagreen;
            }
            .left{ 
                left: 0;
            }
            .right{ 
                right: 0;
            }
    
            .center{ 
                margin: 0 200px;
                min-height: 400px;
                background: lightseagreen;
            }
        </style>
    </head>
    <body>
        <div class="container">
    
            <div class="left"></div>
            <div class="center"></div>
            <div class="right"></div>
        </div>
    </body>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70]: /images/20221014/2f0dfbac778d496baa52c6556cb5c486.png
[20210530142241603.png]: /images/20221014/f237b75c7f2f4893b83ddc2dc5c002cb.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 1]: /images/20221014/b55eb776b3ee4e138fe520e56c7e540b.png
[20210530142431679.png]: /images/20221014/d2ed85372f0e4333ba8356cb9b0750c9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDczNTAxOA_size_16_color_FFFFFF_t_70 2]: /images/20221014/1002d62a90614fab944a58d1c85b845b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，219人围观）

还没有评论，来说两句吧...

相关阅读

相关圣杯布局和双飞翼布局

圣杯布局和双飞翼布局，虽然两者的实现方法略有差异，不过都遵循了以下要点：两侧宽度固定，中间宽度自适应中间部分在 DOM 结构上优先，以便先行渲染允许三

小咪咪/ 2022年12月29日 04:57/ 0 赞/ 199 阅读

相关分析理解——圣杯布局和双飞翼布局

综述：其实两者的功能相同，都是为了实现一个两侧宽度固定，中间宽度自适应的三栏布局，中间部分在DOM结构上优先，以便先行渲染。（核心目的：先解析中间栏，展示当前页面的核心内容

约定不等于承诺〃/ 2022年11月25日 11:50/ 0 赞/ 225 阅读

相关经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应

经典布局方案（圣杯布局+双飞翼布局）左右固定，中间自适应圣杯布局双飞翼布局 flex布局其实就是左右固定，中间自适应圣杯布局：浮动和负ma

叁歲伎倆/ 2022年10月16日 13:20/ 0 赞/ 220 阅读

相关深入理解圣杯布局和双飞翼布局

前言最近我朋友在群里发了一张图，说为什么main的宽度100%了，sub还是可以覆盖它呢？看来是时候带他回忆一波经典的圣杯布局和双飞翼布局了。正好最近看到好多面试题都有

谁践踏了优雅/ 2022年10月01日 08:57/ 0 赞/ 219 阅读

相关 css-圣杯布局和双飞翼布局

1.圣杯布局：（1）父元素中包含左中右三个盒子，并且让他们分别左浮动。（2）将中间的盒子宽度设为100%，并且它在html中代码位置放在左右代码位置的上面（就是所说的第

淩亂°似流年/ 2022年05月29日 12:35/ 0 赞/ 261 阅读

相关圣杯布局和双飞翼布局

圣杯布局与双飞翼布局 -------------------- 圣杯和双飞翼布局都是左右两边固定中间自适应，都是 `负margin`的应用。圣杯布局 -

淩亂°似流年/ 2022年05月21日 02:45/ 0 赞/ 254 阅读

相关圣杯布局和双飞翼布局

圣杯布局圣杯布局就是三栏布局，其中左右两栏固定宽度，中间部分自适应主要步骤： 1. 在html中，中间的块在最前面，后面紧跟左边的块和右边的块 2. 三者均

Bertha 。/ 2022年05月13日 05:24/ 0 赞/ 265 阅读

相关 CSS 圣杯布局 / 双飞翼布局的实现

工作的越久，有些基础知识我们可能就逐渐淡忘了，今天我们来回顾一下css的圣杯布局和双飞翼布局，这两个名词你可能不熟，那三栏布局你肯定就非常熟悉了，就是两边定宽，中间

爱被打了一巴掌/ 2022年02月02日 06:15/ 0 赞/ 311 阅读

相关面试之BFC布局||圣杯布局||双飞翼布局

一、BFC布局 BFC，即Block Formatting Contexts（块级格式化上下文），具有BFC特性的元素可以看做是隔离了的独立容器，容器里面的元素不会再布局上

比眉伴天荒/ 2022年01月29日 18:49/ 0 赞/ 346 阅读

相关 CSS三栏布局：圣杯布局、双飞翼布局

其实三栏布局比较简单，而且方法也有很多。今天了解了一下传统的三栏布局方法：圣杯布局、双飞翼布局，本文简单记录一下。所谓三栏布局，通常是指左右两栏定宽，中间一栏自适应页面宽

爱被打了一巴掌/ 2022年01月17日 11:07/ 0 赞/ 335 阅读