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

时间:2023-03-09 15:50:32
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>

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

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

针对这块的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;
}

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