CSS布局圣杯布局和双飞翼布局以及使用Flex实现圣杯布局

Ifenglala

于 2022-05-30 18:08:39 发布

阅读量285

点赞数

文章标签： css html css3

本文链接：https://blog.csdn.net/Ifenglala/article/details/125051471

版权

圣杯布局&双飞翼布局

所谓圣杯布局和双飞翼布局其实解决的问题是相同的，都是解决左右两栏固定宽度，中间部分自适应，其中某部分内容比其他内容高的时候，保证三者元素等高。
他俩的区别就是：圣杯用padding。双飞翼用在main外层多加了一个div然后改用margin。

圣杯布局

以下面html为例：

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

1.main、left、right全部左浮动，在设置一个position：relative稍后会用到。
2.main的宽度设置为100%。left和right固定宽度（假设100px）。
3.此时main自己沾满了一行，所以给left拽上来设置marginleft：100%，此时left虽然上来了但是是覆盖在main上面的。
4.给content设置padding-left等于left的宽，此时左边有100px的空白，main和left都被挤过来了，要想还原，将left向左在移动100px就行了。
5.此时就剩下right在下面，同理margin-right：-100%就上去了。

css代码：

  <style>
        * {
            box-sizing: border-box;
        }
        .content {
            overflow: hidden;
            padding-left: 100px;
            padding-right: 100px;
        }
        .content > div {
            float: left;
            position: relative;
        }
        .main {
            width: 100%;
            height:100px;
            border:1px solid red;
        }
        .left {
            width:100px;
            margin-left: -100px;
            right:100%;
            height:100px;
            border:1px solid #000;
        }
        .right {
            width:100px;
            margin-right: -100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

双飞翼布局

双飞翼布局的html：

    <div class="content">
        <div class="main">
            <div class="main-inner">main</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>

对比一下css的区别：多了一个.main-inner，少了一些相对定位。

    <style>
        * {
            box-sizing: border-box;
        }

        .main-inner {
            margin-left:100px;
            margin-right: 100px;
        }

        .content {
            overflow: hidden;
            /* padding-left: 100px;
            padding-right: 100px; */
        }
        .content > div {
            float: left;
            /* position: relative; */
        }
        .main {
            width: 100%;
            height:100px;
            border:1px solid red;
        }
        .left {
            width:100px;
            margin-left: -100%;
            /* right:100px; */
            height:100px;
            border:1px solid #000;
        }
        .right {
            width:100px;
            /* margin-right: -100px; */
            margin-left: -100px;
            height:100px;
            border:1px solid #000;
        }

    </style>

Flex布局

相比较两者，Flex布局就好理解得多
html和圣杯布局一样
css：

 <style>
        * {
            box-sizing: border-box;
        }
        .content {
            overflow: hidden;
            display:flex;
            flex:1
        }
   
        .main {
            flex:1;
            height:100px;
            border:1px solid red;
        }
        .left {
            flex:0 0 100px;
            order:-1;
            height:100px;
            border:1px solid #000;
        }
        .right {
            flex:0 0 100px;
            height:100px;
            border:1px solid #000;
        }

    </style>