NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应

该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及。

上篇中介绍了左侧定宽,右侧自适应的布局,这篇将介绍类似布局,只是换成了右侧定宽,左侧自适应。

html方面

<div class="zell-dm2 g-bd2 f-cb">
    <div class="g-mn2">
        <div class="g-mn2c">
            <p>
                我是左侧
            </p>
        </div>
    </div>
    <div class="g-sd2">
        <p>
            我是右侧
        </p>
    </div>
</div>

那么针对这一块,实现的效果如图:

针对这块的css代码如下:

.g-sd2{
    float: right;
    position: relative;
    width:220px;
    margin-left:-220px;
    background: red;
}
.g-mn2 {
    float: left;
    width:100%;
}
.g-mn2c {
    margin-right: 230px;
}
.zell-dm2 p{
    background: pink;
    height:300px;
    padding:5px;
}

思路和左侧定宽一模一样,很简单,赶快动手试试吧!

原文地址:https://www.cnblogs.com/Zell-Dinch/p/4459295.html