NEC学习 ---- 布局 -两列定宽

这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度.

html代码:

<div class="g-bd f-cb">
    <div class="g-sd">
        <p>
            我是左侧定宽
        </p>
    </div>
    <div class="g-mn">
        <p>
            我是右侧定宽
        </p>
    </div>
</div>

css代码:

.g-bd{
    width:980px;
    border:1px solid black;
}
.g-sd{
    float: left;
    width:300px;
    border:1px solid red;
}
.g-mn{
    float: right;
    width:670;
}
.g-bd p{
    padding:5px;
    height:150px;
}
.g-sd p{
    background: pink;
    width:290px;
}
.g-mn p{
    width:660px;
    background: pink;
}

效果如图: