圣杯布局与双飞翼布局

最新推荐文章于 2024-06-11 14:46:29 发布

ZHZ98

最新推荐文章于 2024-06-11 14:46:29 发布

阅读量122

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_43756675/article/details/103577193

版权

前端专栏收录该内容

15 篇文章 0 订阅

订阅专栏

圣杯布局和双飞翼布局都是两边固定，中间内容自适应，当中列要完全显示，中间列要优先加载

圣杯布局

圣杯布局首先要用float搭建完整的布局框架，让middle，left，right都浮动，给left设置一个margin-left：-100%，此时left区域上去并靠左，给right设置一个margin-left：-200px,此时right区域上去并靠右，设置content的padding，上下为0，左右为200px，左右让出200px给left，right，但是left，right也跟着过去，接着给left，right设置相对定位，left区域left：-200px，right区域right：-200px

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>圣杯布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .header , .footer{
            height: 50px;
            text-align: center;
            background-color: aquamarine;
            border: 1px solid black;
        }
        .content{
            padding: 0 200px;
        }
        .content .middle{
            float: left;
            width: 100%;
            background-color: pink;
        }
        .content .left{
            position: relative;
            left: -200px;
            margin-left: -100%;
            float: left;
            width: 200px;
            background-color: salmon;
        }
        .content .right{
            position: relative;
            right: -200px;
            margin-left: -200px;
            float: left;
            width: 200px;
            background-color: salmon;
        }
        .clearfix{
            *zoom: 1;
        }
        .clearfix:after{
            content: "";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
    <div class="header">

    </div>
    <div class="content clearfix">
        <div class="middle">middle</div>
        <div class="left">left
        </div>
        <div class="right">right</div>
    </div>
    <div class="footer">

    </div>
</body>
</html>

双飞翼布局

双飞翼布局前三步与圣杯布局一样，主要区别在中间内容的处理上，在里面middle增加一个inner，给inner设置padding：0 200px，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>双飞翼布局</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        body{
            min-width: 600px;
        }
        /* 三列的伪等高布局 */
        #content .middle,#content .left,#content .right{
            /* padding-bottom: 10000px;
            margin-bottom: -10000px; */
            height: 50px;
            float: left;
            line-height: 50px;
        }
        #header,#footer{
            border: 1px solid black;
            text-align: center;
            background-color: deeppink;
        }
        /* 双飞翼布局 */
        #content{
            overflow: hidden;
        }
        #content .middle{
            background-color: darksalmon;
            width: 100%;
        }
        #content .middle .m_inner{
            padding: 0 200px;
        }
        #content .left,#content .right{
            background-color: darkseagreen;
            width: 200px;
            text-align: center;
        }
        #content .left{
            margin-left: -100%;
        }
        #content .right{
            margin-left: -200px;
        }

    </style>
</head>
<body>
    <div id="header">
        <h3>header</h3> 
    </div>
    <div id="content">
        <div class="middle">
            <div class="m_inner">
                middle
            </div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div id="footer">
        <h3>footer</h3>
    </div>
</body>
</html>

ZHZ98

关注

0
点赞
踩
0

收藏

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

圣杯布局和双飞翼布局都是两边固定，中间内容自适应，当中列要完全显示，中间列要优先加载圣杯布局圣杯布局首先要用float搭建完整的布局框架，让middle，left，right都浮动，给left设置一个margin-left：-100%，此时left区域上去并靠左，给right设置一个margin-left：-200px,此时right区域上去并靠右，设置content的padding，上下...
复制链接

扫一扫

专栏目录