NEC学习 ---- 布局 -三列，左侧自适应

效果图:

html代码:

<div id="demo4">
    <div class="g-bd4 f-cb">
        <div class="g-sd41">
            <p>右侧定宽1</p>
        </div>
        <div class="g-sd42">
            <p>右侧定宽2</p>
        </div>
        <div class="g-mn4">
            <div class="g-mn4c">
                <p>左侧自适应</p>
            </div>
        </div>
    </div>
</div>

CSS代码:

#demo4{
    width:980px;margin:auto;
    margin-top: 45px;
}
.g-bd4{
    border:1px solid black;
}
.g-sd41,.g-sd42{
    position: relative;float: right;width:230px;
}
.g-sd42{
    width:190px;margin-right: 10px;
}
.g-mn4{
    float: left;width:100%;margin-right: -430px;
}
.g-mn4c{
    margin-right:440px;
}
.g-bd4 p{
    padding:5px;background-color: #034888;
    height:140px;
}

Done :)