双飞翼布局and圣杯布局

<section>
    <div class="container">
        <div class="main">中间部分</div>
    </div>
        <div class="left">左边</div>
        <div class="right">右边</div>
</section>

.left,.right{width: 100px;background-color: red;float: left;height: 200px;}
.left{margin-left: -100%;}
.right{margin-left: -100px;}
.container{width:100%;height: 200px;float: left;background-color: pink;}
.main{background-color: orange;margin: 0 100px;}

<section>
    <div class="main">中间</div>
    <div class="left">左边</div>
    <div class="right">右边</div>
</section>

section{padding: 0 100px;}
section div{height: 200px;}
.left,.right{width: 100px;background-color: red;float: left; position: relative; }
.left{margin-left: -100%;left: -100px;}
.right{margin-left: -100px;right: -100px;}
.main{width:100%;float: left;background-color: pink;}