圣杯布局和双飞翼布局的比较

最新推荐文章于 2022-08-16 19:48:13 发布

原创最新推荐文章于 2022-08-16 19:48:13 发布 · 236 阅读

1 ·

CC 4.0 BY-SA版权

前端小白，博客搬家掘金Xpromise，欢迎交流，撒花o(*￣▽￣*)ブ

文章标签：

#HTML

HTML 专栏收录该内容

13 篇文章

订阅专栏

1、圣杯布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       *{
           padding: 0;
           margin: 0;
       }
       /*设置最小高度*/
       body{
           min-width: 600px;
       }
        #header,#footer{
            width: 100%;
            height: 50px;
            background-color: lightskyblue;
            text-align: center;
            line-height: 50px;
        }
        /*通过padding的值进行调节*/
        #content{
            padding: 0 200px;
            /*overflow: hidden;*/
        }
        #middle,#left,#right{
            /*height:200px;*/
            float: left;
            /*伪登高*/
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
       #left,#right{
           width: 200px;
           background: red;
       }
       /*通过定位进行左右的固定*/
       #left{
           margin-left: -100%;
           position: relative;
           top: 0;
           left: -200px;
       }
       #right{
           margin-left: -200px;
           position: relative;
           top: 0;
           right: -200px;
       }
       #middle{
           width: 100%;
           background: yellowgreen;
       }
       /*清除浮动*/
        .clearfix{
            content: " ";
            display: block;
            clear: both;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
    <div id="middle">middle</div>
    <div id="left">
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
        left<br>
    </div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

2、双飞翼布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        body{
            min-width: 600px;
        }
        #header,#footer{
            width: 100%;
            height: 50px;
            background-color: lightskyblue;
            text-align: center;
            line-height: 50px;
        }
        /*清除浮动*/
        #content{
            overflow: hidden;
        }
        #middle,#left,#right{
            /*height:200px;*/
            float: left;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
        #left,#right{
            width: 200px;
            background: red;
        }
        #left{
            margin-left: -100%;
        }
        #right{
            margin-left: -200px;
        }
        #middle{
            width: 100%;
            background: yellowgreen;
            overflow: hidden;
        }
        /*通过在主加载元素中添加新的div，利用margin调节*/
        #middle_inner{
            margin-left: 200px;
            margin-right: 200px;
            background-color: cyan;
            padding-bottom: 10000px;
            margin-bottom: -10000px;
        }
    </style>
</head>
<body>
<div id="header">header</div>
<div id="content" class="clearfix">
    <div id="middle">
        <div id="middle_inner">middle</div>
    </div>
    <div id="left">
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
        <!--left<br>-->
    </div>
    <div id="right">right</div>
</div>
<div id="footer">footer</div>
</body>
</html>

3、异同

相同：

（1）都是将主列放在文档流的最前面，使主列优先加载

（2）两种布局都是让三列浮动，在通过调节负外边距形成三列布局

不同：

中间位置的处理：

圣杯是利用父容器左右内边距+定位；

双飞翼将主列中嵌套div，然后利用

    #middle-inner{
                    margin-left: 200px;
                    margin-right: 200px;
                }