圣杯布局与双飞翼布局

最新推荐文章于 2020-08-27 16:54:01 发布

一又十七

最新推荐文章于 2020-08-27 16:54:01 发布

阅读量74

点赞数

分类专栏： CSS

本文链接：https://blog.csdn.net/weixin_45387568/article/details/102631425

版权

CSS 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

两者相同之处是实现三栏布局，都是利用float浮动加上左右两栏用负margin实现并排。

不用之处在于解决中间栏内容的遮挡问题：
圣杯布局：中间div设置padding值，左右两栏相对定位 position: relative回到对应位置。

  <div id="hd">header</div>
        <div id="bd">
            <div id="middle">middle</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>

双飞翼布局：直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

 <div id="hd">header</div>
    <div id="middle">
        <div id="inside">middle</div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="footer">footer</div>

圣杯布局：

 <body>
        <div id="hd">header</div>
        <div id="bd">
            <div id="middle">middle</div>
            <div id="left">left</div>
            <div id="right">right</div>
        </div>
        <div id="footer">footer</div>
    </body>
        <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 38px;
            font-weight: 600;
        }

        #hd {
            height: 100px;
            background: #aaa;
            text-align: center;
        }

        #bd {
            padding: 0 200px 0 180px;
            height: 300px;
            border-top: 5px solid black;
        }

        #middle {
            float: left;
            width: 100%;
            height: 300px;
            background: blue;
        }

        #left {
            float: left;
            width: 180px;
            height: 300px;
            margin-left: -100%;
            background: pink;
            position: relative;
            left: -180px;
        }

        #right {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -200px;
            background: pink;
            position: relative;
            right: -200px;
        }

        #footer {
            height: 100px;
            background: #aaa;
            text-align: center;
        }
    </style>

双飞翼布局：

<body>
    <div id="hd">header</div>
    <div id="middle">
        <div id="inside">middle</div>
    </div>
    <div id="left">left</div>
    <div id="right">right</div>
    <div id="footer">footer</div>
</body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 38px;
            font-weight: 600;
        }

        #hd {
            height: 100px;
            background: #aaa;
            text-align: center;
        }

        #middle {
            float: left;
            width: 100%;
            height: 300px;
            background: blue;
        }

        #left {
            float: left;
            width: 180px;
            height: 300px;
            margin-left: -100%;
            background: pink;
        }

        #right {
            float: left;
            width: 200px;
            height: 300px;
            margin-left: -200px;
            background: pink;
        }

        #inside {
            margin: 0 200px 0 180px;
            height: 300px;
            border-top: 5px solid black;
        }

        #footer {
            clear: both;
            height: 100px;
            background: #aaa;
            text-align: center;
        }
    </style>

两者的效果图是一致的：
在这里插入图片描述对比图：

一又十七

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
圣杯布局与双飞翼布局

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。两者相同之处是实现三栏布局，都是利用float浮动加上左右两栏用负margin实现并排。不用之处在于解决中间栏内容的遮挡问题：圣杯布局：中间div设置padding值，左右两栏相对定位 position: relative回到对应位置。 <div id="hd"&g...
复制链接

扫一扫