圣杯布局和双飞翼布局

圣杯布局和双飞翼布局是传统三栏式布局的延伸

双飞翼布局和圣杯布局的区别在于中间部分的内容外面包了一层div,相同点在中间部分主体的结构的最前面，优先渲染主体部分内容

1.圣杯布局

*{margin: 0;padding: 0;}
body{min-width: 700px;}
.header,.footer{background-color: #f99;text-align: center;height: 50px;line-height: 50px;}
.left,.middle,.right{position: relative;float: left;min-height: 130px;line-height: 130px;text-align: center;}
.container{padding: 0 220px 0 200px;overflow: hidden;}
.left{margin-left: -100%;left: -200px;width: 200px;background-color: #9ff;}
.right{margin-left: -220px;right: -220px;width: 220px;background-color: #cf9;}
.middle{width: 100%;background-color: #cff;word-break: break-all;}
.footer{clear: both;}

<!-- 头部 -->
<div class="header">
    <h4>header</h4>
</div>
<!-- 主体 -->
<div class="container">
    <div class="middle">
        <h4>middle</h4>
    </div>
    <div class="left">
        <h4>left</h4>
    </div>
    <div class="right">
        <h4>right</h4>
    </div>
</div>
<!-- 底部 -->
<div class="footer">
    <h4>footer</h4>
</div>

2. 双飞翼布局

*{margin: 0;padding: 0;}
 body{min-width: 700px;}
 .header,.footer{background-color: #f99;text-align: center;height: 50px;line-height: 50px;}
.left,.middle,.right{float: left;min-height: 130px;line-height: 130px;text-align: center;}
.left{margin-left: -100%;width: 200px;background-color: #9ff;}
.right{margin-left: -220px;width: 220px;background-color: #cff;}
.middle{width: 100%;}
.middle-inner{margin-left: 200px;margin-right: 200px;min-height: 130px;background-color: #cf9;word-break: break-all;}
.footer{clear: both;}

<div class="header">
    <h4>header</h4>
</div>
<!-- 主体 -->
<div class="container">
    <div class="middle">
        <div class="middle-inner">
        <h4>middle</h4>
        </div>
    </div>
    <div class="left">
        <h4>left</h4>
    </div>
    <div class="right">
        <h4>right</h4>
    </div>
</div>
<!-- 底部 -->
<div class="footer">
    <h4>footer</h4>
</div>