该篇必须引用初始化样式和功能性样式,样式在前篇 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. COOKIE和SESSION关系和区别

    一.cookie介绍 cookie 常用于识别用户.cookie 是服务器留在用户计算机中的小文件.每当相同的计算机通过浏览器请求页面时,它同时会发送 cookie.通过 PHP,您能够创建并取回 c ...

  2. cJSON: 一个用c写的一个简单好用的JSON解析器

    转自:http://blog.csdn.net/chenzhongjing/article/details/9188347 下载地址: http://sourceforge.net/projects/ ...

  3. &是什么运算符(转)

    &表示两种运算符,其中一种表示取值运算符,一种是按位与 取值运算符 int a=1; int *p=&a; //其中&a表示的就是把a中的地址取出来,然后赋给指针变量,也就是说 ...

  4. SQL_Server_2005_函数大全(描述及实例)

    为了方便阅读,把函数分为四种类型,分别表述. SQL_Server_2005_字符串函数(描述及实例) 函数名称:ascii.char.charindex.difference.left.right. ...

  5. node相关--socket.io

    使用Socket.IO可以避免webSocket产生的问题: 传输: Socket.IO中消息的传递是基于传输的,而非全部依靠WebSocket; 它总会尝试选择对用户来说速度最快.对服务器性能来说最 ...

  6. 不用写软件,纯JS 实现QQ空间自动点赞

    这里分享一个自己写的点赞JS,已实现了好友动态.右侧栏猜你喜欢 点赞,有兴趣的朋友可以加上去玩玩.打开浏览器的开发者模式运行就可以看到效果了 var count = 0; var total = 0; ...

  7. POJ1850 Code(组合+康托展开)

    题目问一个合法字符串的字典序是第几个,合法的字符串是指里面的字符严格递增. 先判断合不合法,然后用类似康托展开的过程去求.大概过程就是用组合数算出某长度某前缀有几个,累加起来. 真难一遍写对.. #i ...

  8. android studio ndk 调试

    一: 先看看用 ndk-gdb 手动调试 这种方法只适用于手动编写 Android.mk 的情况,因为我们要手动 build debug 版本的 .so 文件.具体可以参考我的前一篇文章. 1 And ...

  9. 添加 Windows 8.1 无虚拟机启动项 解决极品飞车的不支持虚拟机报错

    在Windows 8.1 64位环境下,安装完极品飞车17后,运行程序会出现错误对话框: Sorry, this application cannot run under a Virual Machi ...

  10. 【SPOJ】1825. Free tour II(点分治)

    http://www.spoj.com/problems/FTOUR2/ 先前看了一会题解就自己yy出来了...对拍过后交tle.................. 自己造了下大数据........t ...