DIV+CSS布局之圣杯布局与双飞翼布局

谁践踏了优雅 2022-06-03 05:44 227阅读 0赞

**圣杯布局 & 双飞翼布局**  
简单介绍一下什么是双飞翼布局和圣杯布局：  
它们俩都是为了解决三栏布局问题，左右栏宽度固定，中间栏自适应（随着父盒子大小改变而改变）。中间栏要放在中间以优先渲染。它们的布局思想略微有且差别。  
***废话不多说，代码奉上***

hTML

<body>
    <div class="main">
            <div class="center">center</div>
            <div class="left">left</div>
            <div class="right">right</div>
        </div>
    </body>

CSS

.main{ margin:0 auto; height: 300px; max-width: 1000px; min-width: 600px; width: 900px; padding-left: 150px; padding-right: 250px; }
            .main>div{ float: left; }
            .left{ height: 100%; width: 150px; background: #ccc; position: relative; left: -150px;*/ }
            .right{ background: blue; height: 100%; width: 250px; position: relative; right: -250px;*/ }
            .center{ width: 100%; height: 100%; background: red; }

为了让他们仨在“同一水平”，三个div都设置为 float：left  
结果如图：

![这里写图片描述][SouthEast]  
Emmm 结果似乎不是想象中的样子，为了真的能在同一水平，我们让左右盒子外边距分别移动margin-left: -100%,margin- right:-200px;  
![这里写图片描述][SouthEast 1]  
似乎可以了，but，左右盒子把中间盒子覆盖了。于是我们可以在父盒子上设置padding-left：100px和padding-right：200px 强制把中间盒子被覆盖的部分挤到中间去。再对左右盒子用相对定位，再让左盒子相对原来的位置左移动它自身宽度，右盒子相对于原来的位置向右移动它自身宽度。

.left{ height: 100%; width: 150px; background: #ccc; margin-left: -100%; position: relative; left: -150px; }
            .right{ background: blue; height: 100%; width: 250px; margin-left: -250px; position: relative; right: -250px; }

大功告成：这样中间的盒子就可以实现自适应啦  
![这里写图片描述][SouthEast 2]

**双飞翼布局**  
双飞翼布局与圣杯布局原理差不多，只有略微差别。  
代码奉上

HTML：
    <div class="wrap">
        <div class="center">
            <div class="center-son">centerxxxxx</div>
        </div>
        <div class="left">lefttt</div>
        <div class="right">right</div>
    </div>

HTML结构中，.center中间多了一个子盒子—— .center-son。这是两个布局的差别所在。Go on~

CSS：
    .wrap{ height: 300px; width: 700px; max-width: 900px; min-width: 500px; margin:0 auto; }
        .wrap>div{ float: left; }
        .center{ height: 100%; width: 100%; background: yellow; /*border: 10px solid #000;*/ }
    .center>.center-son{ margin:0 200px 0 100px; width: 100%; }
        .left{ height: 100%; width: 100px; background: red; margin-left: -100%; }
        .right{ width: 200px; height: 100%; background: blue; margin-left: -200px; }

CSS和之前差不多，多了一个.center-son样式，收工，不再需要给左右盒子设置样式  
![这里写图片描述][SouthEast 3]

**总结：**设置div 的 box-sizing:border-box 再给中间盒子+10px边框  
清晰看到他们的区别所在  
圣杯!  
![这里写图片描述][SouthEast 4]  
双飞翼  
![这里写图片描述][SouthEast 5]  
从以上两个图我们可以明显知道  
**圣杯的思想是**：  
中间盒子被覆盖的部分，通过给父盒子设置padding-left和padding-right，把中间盒子往中间挤，让它不被左右盒子覆盖。  
**双飞翼思想：**  
给中间盒子加一个子盒子，中间盒子虽然还是被覆盖着，但可以通过它的子盒子的margin-left和margin-right，让它的子盒子不被覆盖。然后在子盒子输入内容。

**双飞翼比较简单**

[SouthEast]: /images/20220603/cb415f13c2a8497a861e53f01cb45519.png
[SouthEast 1]: /images/20220603/80a75c68c15042f3913ec2446d8799a1.png
[SouthEast 2]: /images/20220603/ac8d2aeb882a4d9d85edb670de6d35e9.png
[SouthEast 3]: /images/20220603/5becc4f4348a4f58915d43f5b44c8af9.png
[SouthEast 4]: /images/20220603/21de5b5ad5f74a8eb03e8cd87210a2c2.png
[SouthEast 5]: /images/20220603/5f8f924028b645c18de65f62ebac5ea1.png