双飞翼布局和圣杯式布局

圣杯布局和双飞翼布局基本上是一致的，都是两边固定宽度，中间自适应的三栏布局，其中，中间栏放到文档流前面，保证先行渲染。

解决方案大体相同，都是三栏全部 float:left 浮动，区别在于解决中间栏div的内容不被遮挡上。

圣杯布局是中间栏在添加相对定位，并配合left和right属性，效果上表现为三栏是单独分开的（如果可以看到空隙的话）。

双飞翼布局是在中间栏的div中嵌套一个div，内容写在嵌套的div里，然后对嵌套的div设置margin-left和margin-right，效果上表现为左右两栏在中间栏的上面，中间栏还是100%宽度，只不过中间栏的内容通过margin的值显示在中间。

圣杯式布局https://blog.csdn.net/Night_Nine_Leaves/article/details/79660762

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .header {
        height: 50px;
        background: #eee;
        text-align:center;
    }
    .body {
/*左右栏通过添加负的margin放到正确的位置了，此段代码是为了摆正中间栏的位置*/
        text-align:center;
        padding:0 200px 0 100px;
        height:100px;
    }
    .middle {
        float:left;
        width:100%;
        height:100px;
        background: #aaa;
    }
    .left {
        float:left;
        width:100px;
        height:100px;
        margin-left: -100%;
        background: #0c9;
/*中间栏的位置摆正之后，左栏的位置也相应右移，通过相对定位的left恢复到正确位置*/
        position:relative;
        left:-100px;
    }
    .right {
        float:left;
        width:200px;
        height:100px;
        margin-left: -200px;
        background: #0c9;
/*中间栏的位置摆正之后，右栏的位置也相应左移，通过相对定位的right恢复到正确位置*/
        position:relative;
        right:-200px;
    }
    .footer {
        height: 50px;
        background: #666;
        text-align:center;

    }
    </style>
</head>
<body>
    <div class="header">header</div>
    <div class="body">
       <div class="middle">middle</div>
       <div class="left">left</div> 
       <div class="right">right</div>  
    </div>
    <div class="footer">footer</div>
</body>
</html>

双飞翼式布局

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style type="text/css">
    .header {
        height: 50px;
        background: #eee;
        text-align:center;
    }
    .middle {
        float: left;
        width:100%;
        height:100px;
        background: blue;
    }
    .inside {
        margin: 0 20px 0 180px;
        height:100px;
    }
    .left {
        float:left;
        width:100px;
        height:100px;
        margin-left: -100%;
        background: #0c9;
    }
    .right {
        float:left;
        width:200px;
        height:100px;
        margin-left: -200px;
        background: #0c9;
    }
    .footer {
        clear:both;
        height: 50px;
        background: #666;
        text-align:center;
    }
    </style>
</head>
<body>
<!-- 双飞翼布局是在middle的div里又插入一个div，通过调整内部div的margin值，实现中间栏自适应，内容写到内部div中。 -->
    <div class="header">header</div>
    <div class="middle">
       <div class="inside">middle</div> 
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
　　<div class="footer">footer</div>
</body>
</html>

 

posted @ 2019-04-25 21:55  sarah_wen  阅读(299)  评论(0)    收藏  举报