该篇必须引用初始化样式和功能性样式,样式在前篇 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. 移除IIS默认的响应头

    在IIS+ASP.NET的运行环境,默认情况下会输出以下的响应头(Response Headers): 那如何移除这些响应头呢?下面我们来一个一个移除. 1. 移除Server 借助IIS URL R ...

  2. svn服务端hooks钩子可用于多项目自动同步

    废话不多说,直接上post-commit脚本了: 日志会全部记录下来包括同步的文件 vim post-commit #!/bin/sh REPOS="$1" # 仓库的路径 REV ...

  3. sybase常用SQL语句,工作中积累的

    -------创建sybase设备 语句--------- disk init name="DEV_DB_CLIENT_DAT26", physname="F:\syba ...

  4. Chromium Embedded Framework 中文文档(简介)

    转自:http://www.cnblogs.com/think/archive/2011/10/06/CEF-Introduce.html 简介 Chromium Embedded Framework ...

  5. 利用SQLiteOpenHelper来管理SQLite数据库 (转)

    转载自 利用SQLiteOpenHelper来管理SQLite数据库 http://blog.csdn.net/conowen/article/details/7306545 Android学习笔记( ...

  6. Android_就像小朋友“搭积木”一样。

    就像小朋友“搭积木”一样.感觉这句话很有意思.完整的话是这样的: Android提供了大量功能丰富的UI组件,开发者只要按一定规律把这些UI组件组合起来 --就像小朋友“搭积木”一样,把这些UI组件搭 ...

  7. loj 1300( 边双联通 + 判奇圈 )

    题目链接:http://acm.hust.edu.cn/vjudge/problem/viewProblem.action?id=27010 思路:首先Tarjan标记桥,然后对于dfs遍历整个图,我 ...

  8. LCS(打印全路径) POJ 2264 Advanced Fruits

    题目传送门 题意:两个字符串结合起来,公共的字符只输出一次 分析:LCS,记录每个字符的路径 代码: /* LCS(记录路径)模板题: 用递归打印路径:) */ #include <cstdio ...

  9. POJ2112 Optimal Milking(最大流)

    先Floyd求牛到机器最短距离,然后二分枚举最长的边. #include<cstdio> #include<cstring> #include<queue> #in ...

  10. Week,Month, Year 日期区间辅助类

    我们在做一些业务系统的时候,经常会用到一些获取时间段的情况.比如要统计某一周.某月.某年 这样一些时间区间内的一些业务数据.这时候我们就需要获取当前时间段内的一些起止日期.这里分享一个通用的日期辅助类 ...