双飞翼布局和圣杯布局

双飞翼布局

html部分

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

css部分

*{
    margin: 0;
    padding: 0;
}


.container{
    width: 100%;
}

.col{
    float: left;
}

.main-wrap{
    width: 100%;
}

.main{
    background-color: yellow;
    height: 100px;
    margin-left: 200px;
    margin-right: 150px;
}

.left{
    height: 100px;
    width: 200px;
    background-color: red;
    margin-left: -100%;
}

.right{
    height: 100px;
    width: 150px;
    background-color: blue;
    margin-left: -150px;
}

效果，两列定宽，中间自适应

圣杯布局

html部分

<div class="container">
            <div class="col center"></div>
            <div class="col left"></div>
            <div class="col right"></div>
        </div>

css部分

*{
    margin: 0;
    padding: 0;
}

.container div{
    height: 100px;
}

.col{
    float: left;
}

.container{
    padding-left: 200px;
    padding-right: 150px;
}

.left{
    width: 200px;
    background-color: red;
    margin-left: -100%;
    position: relative;
    right: 200px;
}

.right{
    width: 150px;
    background-color: blue;
    margin-right: -150px;
    
}

.center{
    width: 100%;
    background-color: yellow;
}

效果同上