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 :)