该篇必须引用初始化样式和功能性样式,样式在前篇 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;
}

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

NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应的更多相关文章

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

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

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

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  3. NEC学习 ---- 布局 -三列, 左右定宽,中间自适应

    ---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...

  4. NEC学习 ---- 布局 -三列,左侧自适应

    效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...

  5. NEC学习 ---- 布局 -三列,右侧自适应

    效果如图 html代码: <div class="g-bd3 f-cb"> <div class="g-sd31"> <p> ...

  6. table-cell完成左侧定宽,右侧定宽及左右定宽等布局

    使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...

  7. css 两列布局中单列定宽单列自适应布局的6种思路

    前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...

  8. CSS布局 两列布局之单列定宽,单列自适应布局思路

    前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...

  9. css实现左边定宽右边自适应的5种方法总汇

    在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...

随机推荐

  1. android常用的一些UI调试命令am,pm

    转自:http://www.52rd.com/Blog/Detail_RD.Blog_blogercn_71675.html android在开发者模式下,我们能够使用adb执行andorid手机上s ...

  2. mac上安装gradle

    首先,先download最新版本的gradle,网址如下:http://www.gradle.org/get-started然后将下载下来的zip包放在你要安装的路径上,我安装在/usr/local/ ...

  3. ArcGIS for Android地图控件的5大常见操作

    GIS的开发中,什么时候都少不了地图操作.ArcGIS for Android中,地图组件就是MapView,MapView是基于Android中ViewGroup的一个类(参考),也是ArcGIS ...

  4. jQuery对表单、表格的操作及更多应用(下:其他应用)

    内容摘录自锋利的JQuery一书 三.其他应用  1 网页字体大小控制(P164) <span class="bigger">放大</span> <s ...

  5. Half Sync And Half Async 半同步半异步模式

    如题,这是一个典型的CS结构的模式,至少曾经在CS结构中用过,只是没用好.当年用UDP死活都处理不过来网络命令,用此模式轻松解决. 此模式是典型的三层架构,同步层在一个线程内处理业务逻辑:异步层接受并 ...

  6. POJ2407 Relatives(欧拉函数)

    题目问有多少个小于n的正整数与n互质. 这个可以用容斥原理来解HDU4135.事实上这道题就是求欧拉函数$φ(n)$. $$φ(n)=n(1-1/p_1)(1-1/p_2)\dots(1-1/p_m) ...

  7. General part中方向选取的作用

    这个方向是零部件坐标系 part coordinate system, 也叫local part reference frame. 这个方向要注意, 因为质心的方位由它决定,同时下面的输入的转动惯量就 ...

  8. BZOJ1111 : [POI2007]四进制的天平Wag

    POI2007完结撒花~ 首先将n转化为四进制,从低位到高位DP f[i]表示这一位不向下一位借位 g[i]表示这一位向下一位借位,但借的那个不算在i f[0]=0,g[0]=inf f[i]=mer ...

  9. xubuntu12.04配置

    更改源:我用上海交通大学的 首先备份Ubuntu12.04源列表sudo cp /etc/apt/sources.list /etc/apt/sources.list.backup   #(备份下当前 ...

  10. 【wikioi】1907 方格取数3(最大流+最大权闭合子图)

    http://www.wikioi.com/problem/1907/ 这题我一开始想到的是状压,看到n<=30果断放弃. 然后也想到了黑白染色,然后脑残了,没想到怎么连边. 很简单的一题 黑白 ...