佈局方式

// 刪除wrap 代開註釋

// html
<!--
<div class="container">
    <div class="main">
        <div class="wrap"></div>
    </div>
    <div class="left"></div>
    <div class="right"></div>
</div>
-->

// css
.container{
    border:1px solid red;
    // padding:0 150px;
    @mixin fl{
        float:left;
        min-height:200px;
    }
    &:after{
        display:block;
        content: "";
        clear:both;
    }
    .main{
        width:100%;
        @include fl;
        // background:#666;
        .wrap{
            margin:0 150px;
            min-height:200px;
            background:#666;
        }
    }
    .left{
        width:150px;
        @include fl;
        margin-left:-100%;
        // position:relative;
        // left:-150px;
        background:#f4f4f4;
    }
    .right{
        width:150px;
        @include fl;
        margin-left:-150px;
        // position:relative;
        // left: 150px;
        background:#f4f4f4;
    }
}



// 刪除後最終
<div class="container">
    <div class="main"></div>
    <div class="left"></div>
    <div class="right"></div>
</div>
.container{
    border:1px solid red;
    padding:0 150px;
    @mixin fl{
        float:left;
        min-height:200px;
    }
    &:after{
        display:block;
        content:"";
        clear:both;
    }
    .main{
        width:100%;
        @include fl;
        background:#666;
    }
    .left{
        width:150px;
        @include fl;
        margin-left:-100%;
        position:relative;
        left:-150px;
        background:#f4f4f4;
    }
    .right{
        width:150px;
        @include fl;
        margin-left:-150px;
        position:relative;
        left:150px;
        background:#f4f4f4;
    }
}