圣杯布局和双飞翼布局

圣杯布局和双飞翼布局都是两边固定宽度，中间宽度自适应布局。其中，中间栏放到文档流前面，保证先行渲染。解决方案大体相同，都是三栏全部float:left浮动。

一、圣杯布局

圣杯布局是三个div的内容都是在一个盒子里面，都添加float:left浮动，通过margin-left和position:relative的left和right属性，让左右两个div定位在盒子的padding上。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>圣杯布局</title>
    <style>
        body{
            min-width: 700px;
        }
        header,footer{
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #eee;
        }
        .content{
            height: 200px;
            padding: 0 200px;
            overflow: hidden;
            background-color: red;
        }
        .left,.middle,.right{
            float: left;
            position: relative;
            height: 190px;
        }
        .left{
            width: 200px;
            background-color: #ddd;
            margin-left: -100%;
            left: -200px;
        }
        .right{
            width: 200px;
            background-color: green;
            margin-left: -200px;
            right: -200px;
        }
        .middle{
            width: 100%;
            background-color: #aaa;
            word-break: break-all;
        }
    </style>
</head>
<body>
    <header>这是头部</header>
    <div class="content">
        <div class="middle">
            Hello,this is middle. 你好，这里是中间。
            Hello,this is middle. 你好，这里是中间。
        </div>
        <div class="left">
            Hello, this is left. 你好，这里是左边。
        </div>
        <div class="right">
            Hello,this is right. 你好，这里是右边。
        </div>

    </div>
    <footer>这里是尾部</footer>
</body>
</html>

效果图如下：

圣杯布局和双飞翼布局

可以看到，三个div是分开的，都是在content这个盒子里面。

二、双飞翼布局

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>双飞翼布局</title>
    <style>
        body{
            min-width: 700px;
        }
        header,footer{
            clear: both;
            height: 50px;
            text-align: center;
            line-height: 50px;
            background-color: #eee;
        }
        .middle{
            width: 100%;
            height: 200px;
            float: left;
            background-color: #ddd;
        }
        .left{
            width: 200px;
            height: 190px;
            float: left;
            background-color: aquamarine;
            margin-left: -100%;
        }
        .right{
            width: 200px;
            height: 190px;
            float: left;
            background-color: beige;
            margin-left: -200px;
        }
        .middleInside{
            margin: 0 200px;
        }
    </style>
</head>
<body>
    <header>这是头部</header>
    <div class="middle">
        <div class="middleInside">
            Hello,this is middle. 你好，这里是中间。
            Hello,this is middle. 你好，这里是中间。
        </div>
    </div>
    <div class="left">
        Hello, this is left. 你好，这里是左边。
    </div>
    <div class="right">
        Hello,this is right. 你好，这里是右边。
    </div>
    <footer>这里是尾部</footer>
</body>
</html>

效果图如下：

圣杯布局和双飞翼布局

可以看到，左边和右边的div是覆盖在中间div上面的。中间内容都通过控制中间div里面的子div控制展示的。

圣杯布局和双飞翼布局

相关推荐