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

效果如图

html代码:

<div class="g-bd3 f-cb">
    <div class="g-sd31">
        <p>我是左侧</p>
    </div>
    <div class="g-sd32">
        <p>我是中间</p>
    </div>
    <div class="g-mn3">
        <div class="g-mn3c">
            <p>我是右侧自适应</p>
        </div>
    </div>
</div>

css代码:

.g-bd3{
    width:980px;border:3px ridge #3f34e7;
    margin:45px auto;
}
.g-sd31,.g-sd32{
    float: left;
    width:230px;
    position: relative;
}
.g-sd31{
    width:190px;
    margin-right:10px;
}
.g-mn3{
    float: right;
    width:100%;
    margin-left: -460px;
}
.g-mn3c{
    margin-left:440px;
}
.g-bd3 p{
    height:150px;
    background-color: pink;
    padding: 5px;
}

目前为止, 关于布局的NEC了解完毕.

我觉得对于自己组织html和CSS的确有帮助, 同时对于自己的编码也有一定启发. 

希望能小中见大, 触类旁通, 达到运用的目的.