圣杯布局和双飞翼布局

圣杯布局

<style>
    .wraper{
        padding: 0 200px 0 100px;
        overflow: hidden;
    }
    .main, .left, .right{
        text-align: center;
        height: 100px;
        float: left;
    }
    .main{
        width: 100%;
        background-color:skyblue;
    }
    .left{
        width: 100px;
        margin-left: -100%;
        background-color: wheat;
        position: relative;
        left: -100px;
    }
    .right{
        width: 200px;
        margin-left: -200px;
        background-color: thistle;
        position: relative;
        right: -200px;
    }
</style>
<div class="wraper">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>

双飞翼布局

<style>
    .main, .left, .right{
        height: 100px;
        float: left;
    }
    .main{
        width: 100%;
        background-color:skyblue;
    }
    .main-content{
        margin: 0 200px 0 100px;
    }
    .left{
        width: 100px;
        margin-left: -100%;
        background-color: wheat;
    }
    .right{
        width: 200px;
        margin-left: -200px;
        background-color: thistle;
    }
</style>
<div class="wraper">
    <div class="main">
        <div class="main-content">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
</div>