前端开发者都应该掌握的布局-双飞翼布局，圣杯布局

于 2020-01-14 14:43:50 发布
阅读量222 收藏
点赞数
分类专栏： 网页布局 前端基础 文章标签： 网页设计 html5 css3 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41606029/article/details/103972894
版权

圣杯布局和双飞翼布局达到的效果基本相同，都是侧边两栏宽度固定，中间栏宽度自适应。 主要的不同之处就是在解决中间部分被挡住的问题时，采取的解决办法不一样，圣杯布局是在父元素上设置了padding-left和padding-right，在给左右两边的内容设置position为relative，通过左移和右移来使得左右两边的内容得以很好的展现，而双飞翼则是在center这个div中再加了一个div来放置内容，在给这个新的div设置margin-left和margin-right 。

demo如下

1.双飞翼布局

构建dom元素

  <div id="header">#header</div>

     <div>
        <div id="center">
            <div class="content">#center</div>
        </div>
        <div id="left">#left</div>
        <div id="right">#right</div>
    </div>
    <div id="footer">#footer</div>

注意元素结构，center部分在上面，所以先加载

统一设置浮动，以及高度

  #left,
   #right,
   #center {
         float: left;
        text-align: center;
        height: 300px;
        line-height: 300px;
    }

设置左右列的宽度,以及背景颜色，方便查看

#left {
        width: 200px;
background: rgba(95, 179, 235, 0.972);
    }
  #right {
        width: 150px;
background: rgb(231, 105, 2);
    }

此时页面如图所示
QQ浏览器截图20200114131042.png

三个元素均正常浮动，此时发现新的问题，footer元素高度塌陷，footer元素位置为图示箭头3所指的位置

解决办法：

1.在元素(此类说明都是指footer元素)后面加上一个div，设置清除浮动

<div style="clear:both;"></div>

2.设置元素overflow属性为auto，或者hidden

  overflow: hidden;

3.让父元素也浮动(一般都不用这个)

缺点：影响整体页面布局…

4.使用伪元素（推荐）

.clearfix::after,
    .clearfix::before {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

如图

1.png

接下来的任务就是使left,right元素到达指定位置即可

如图所示，left元素刚好在指定位置的正下方，所以直接添加margin属性，设置为负100%即可

    #left {
        width: 200px;
        margin-left: -100%;
        background: rgba(95, 179, 235, 0.972);
    }

此时left元素归位

2.png

此时发现right离所属位置刚好为自身距离，于是设置margin为负的自身宽度

#right {
       width: 150px;
       margin-left: -150px;
       background: rgb(231, 105, 2);
   }

3.png

此时看起来是完成了，其实还差最后一步，设置center元素

.content {
        margin: 0 150px 0 200px;
    }

这里设置margin或者padding都可以，推荐margin，

因为margin是分开元素与元素之间的距离，padding是分开元素与内容的距离

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    body {
        min-width: 550px;
        font-weight: bold;
        font-size: 20px;
    }

    #header,
    #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
    }

    #container {
        overflow: hidden;
    }

    .clearfix::after,
    .clearfix::before {
        content: "";
        display: table;
    }

    .clearfix:after {
        clear: both;
    }

    /* .column {} */

    #left,
    #right,
    #center {
        float: left;
        text-align: center;
        height: 300px;
        line-height: 300px;
    }

    #center {
        width: 100%;
        background: rgb(206, 201, 201);
    }

    #left {
        width: 200px;
        margin-left: -100%;
        background: rgba(95, 179, 235, 0.972);
    }

    #right {
        width: 150px;
        margin-left: -150px;
        background: rgb(231, 105, 2);
    }

    .content {
        padding: 0 150px 0 200px;
    }
</style>

<body>
    <div id="header">#header</div>

    <div class="clearfix">
        <div id="center" class="column">
            <div class="content">#center</div>
        </div>
        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
    </div>
    <!-- <div style="clear:both;"></div> -->
    <div id="footer">#footer</div>

</body>

</html>

2.圣杯布局

圣杯布局和双飞翼布局差不多，原理就是直接在外层容器上加上padding，然后利用relative定位到指定位置

元素结构

  <div class="header">
        头部
    </div>
    <div class="main">
        <div class="center">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">
        底部
    </div>

父元素

 .main {
        height: 300px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }

大部分和上面一样，这里就简单说两句，等下下面贴出完整代码

浮动之后的样子

4.png

将left和right按照和上面一样进行margin -100%和负的自身宽度后

5.png

最后设置左右relative定位到指定位置

   .left {
        width: 200px;
        height: 300px;
        background: yellow;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }
 .right {
        width: 150px;
        height: 300px;
        background: gainsboro;
        margin-left: -150px;
        position: relative;
        left: 150px;
    }

完整代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <title>css</title>
</head>
<style type="text/css">
    body {
        min-width: 550px;
    }

    * {
        margin: 0;
        padding: 0;
    }

    .header,
    .footer {
        background: gray;
        width: 100%;
        height: 50px;
    }

    .footer {
        clear: both;
    }

    .main {
        height: 300px;
        padding: 0 150px 0 200px;
        background: greenyellow;
        *zoom: 1;
    }

    .left,
    .center,
    .right {
        float: left;
    }

    .center {
        width: 100%;
        height: 300px;
        background: red;
    }

    .left {
        width: 200px;
        height: 300px;
        background: yellow;
        margin-left: -100%;
        position: relative;
        left: -200px;
    }

    .right {
        width: 150px;
        height: 300px;
        background: gainsboro;
        margin-left: -150px;
        position: relative;
        left: 150px;
    }
</style>

<body>

    <div class="header">
        头部
    </div>
    <div class="main">
        <div class="center">中间</div>
        <div class="left">左边</div>
        <div class="right">右边</div>
    </div>
    <div class="footer">
        底部
    </div>
</body>

</html>

3.扩展

如果没有要求需要中间元素最先渲染的话，可以使用css的calc函数，如下

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
</head>
<style>
    body {
        min-width: 550px;
        font-weight: bold;
        font-size: 20px;
    }

    #header,
    #footer {
        background: rgba(29, 27, 27, 0.726);
        text-align: center;
        height: 60px;
        line-height: 60px;
    }

    #container {
        /* display: flex; */
        overflow: hidden;
    }

    .column {
        text-align: center;
        height: 300px;
        line-height: 300px;
    }

    #left,
    #right {
        float: left;
    }

    #center {
        /* width: auto; */
        position: absolute;
        width: calc(100% - 350px);
        margin-left: 200px;
        height: 300px;
        background: rgb(206, 201, 201);
    }

    #left {
        width: 200px;
        /* margin-left: -100%; */
        background: rgba(95, 179, 235, 0.972);
    }

    #right {
        width: 150px;
        /* margin-left: -150px; */
        background: rgb(231, 105, 2);
    }

    /* .content {
        margin: 0 150px 0 200px;
    } */
</style>

<body>
    <div id="header">#header</div>
    <div id="container">
        <div id="center" class="content">#center</div>
        <div id="left" class="column">#left</div>
        <div id="right" class="column">#right</div>
    </div>

    <div id="footer">#footer</div>
</body>

</html>

没有兼容性要求的话，使用flex实现

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .content {
            display: flex;
        }

        .sub {
            width: 200px;
            height: 500px;
            background: blue;
        }

        .main {
            flex: 1;
            height: 500px;
            background: red;
        }

        .extra {
            width: 180px;
            height: 500px;
            background: green;
        }
    </style>
</head>

<body>
    <!--  flex布局 -->
    <div class="content">
        <div class="sub"></div>
        <div class="main"></div>
        <div class="extra"></div>
    </div>
</body>

</html>

本文首发于https://zhtblog.cn/

蔚蓝天空~
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值