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

最新推荐文章于 2023-04-27 20:51:00 发布

乌鲁托拉曼

最新推荐文章于 2023-04-27 20:51:00 发布

阅读量488

点赞数 1

分类专栏： HTML+CSS 文章标签：双飞翼布局圣杯

本文链接：https://blog.csdn.net/lizhengxv/article/details/78848423

版权

HTML+CSS 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

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

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
结果如图：

这里写图片描述
Emmm 结果似乎不是想象中的样子，为了真的能在同一水平，我们让左右盒子外边距分别移动margin-left: -100%,margin- right:-200px;

似乎可以了，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;
        }

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

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

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样式，收工，不再需要给左右盒子设置样式
这里写图片描述

总结：设置div 的 box-sizing:border-box 再给中间盒子+10px边框
清晰看到他们的区别所在
圣杯!
这里写图片描述
双飞翼

从以上两个图我们可以明显知道
圣杯的思想是：
中间盒子被覆盖的部分，通过给父盒子设置padding-left和padding-right，把中间盒子往中间挤，让它不被左右盒子覆盖。
双飞翼思想：
给中间盒子加一个子盒子，中间盒子虽然还是被覆盖着，但可以通过它的子盒子的margin-left和margin-right，让它的子盒子不被覆盖。然后在子盒子输入内容。