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;
}
思路和左侧定宽一模一样,很简单,赶快动手试试吧!
NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应的更多相关文章
- NEC学习 ---- 布局 -两列定宽
这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...
- NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应
CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...
- NEC学习 ---- 布局 -三列, 左右定宽,中间自适应
---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...
- NEC学习 ---- 布局 -三列,左侧自适应
效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...
- NEC学习 ---- 布局 -三列,右侧自适应
效果如图 html代码: <div class="g-bd3 f-cb"> <div class="g-sd31"> <p> ...
- table-cell完成左侧定宽,右侧定宽及左右定宽等布局
使用table-cell完成以下几种布局(ie8及以上兼容) 1.左侧定宽-右侧自适应 .left{ width: 300px; height: 500px; border: 1px solid; f ...
- css 两列布局中单列定宽单列自适应布局的6种思路
前面的话 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.本文将从float.inline-block.table.absolute.flex和grid这六种思路来详细说明如何巧妙地实现 ...
- CSS布局 两列布局之单列定宽,单列自适应布局思路
前言 说起自适应布局方式,单列定宽单列自适应布局是最基本的布局形式.比如斗鱼的直播间,后台管理系统都是常用的 我们将从 float, inline-block, table, absolute, fl ...
- css实现左边定宽右边自适应的5种方法总汇
在网页布局中,通常需要实现左边定宽右边自适应布局,默认html的结构如下: <div class="box"> <div class="left&quo ...
随机推荐
- callsession新功能版
可以getopt解析参数. 也实现了将参数用空格分隔,来传给进程. 注意string和LPSTR数据类型的转换方法: LPSTR(lpCmdLine.c_str()) #include <win ...
- Python读写文件乱码问题
对开发者来说,最恼人的问题之一莫过于读写文件的时候,由于编码千差万别,出现乱码问题.好难快速解决啊... 最近我也遇到了这样的问题,经研究,把大致的解决思路拿出来共享. 1. python中习惯首先声 ...
- 一个功能完备的.NET开源OpenID Connect/OAuth 2.0框架——IdentityServer3
今天推荐的是我一直以来都在关注的一个开源的OpenID Connect/OAuth 2.0服务框架--IdentityServer3.其支持完整的OpenID Connect/OAuth 2.0标准, ...
- FFmpeg源代码结构图
转自:http://blog.csdn.net/leixiaohua1020/article/details/44220151 FFmpeg的库函数源代码分析文章列表: [架构图] FFmpeg源代码 ...
- Python 中的函数与类的方法
注:本文转译自 Stackoverflow 上 Adding a Method to an Existing Object 的最佳回答. 在 python 中,def 定义的函数与类中的方法有很大的不 ...
- 《Bluez 》Beta版强势回归!!!
Bluez .Beta 巅峰塔防 强势回归! Z.XML为您呈现 经过了第二轮迭代,我们骄傲的宣布,Bluez Beta版本,正式发布. 下载地址:-> 第二轮的迭代是辛苦的,但是不同于其他队伍 ...
- Linux 串口编程(转)
无论那种操作方式,一般都通过四个步骤来完成: (1) 打开串口 (2) 配置串口 (3) 读写串口 (4) 关闭串口 转自
- 利用SQL语句查询数据库中所有表
Oracle: SELECT * FROM ALL_TABLES;系统里有权限的表 SELECT * FROM DBA_TABLES; 系统表 SELECT * FROM USER_TABLES; 当 ...
- 很多k线形态或k线组合是需要验证的
1.十字星:表明多空力量平衡.是否翻转,需要验证. 2.要反应市场心理的k线才是有效的K线,不然就是伪k或伪k线形态.
- MVC ViewEngineResult实际上是一种设计
概述 MVC中, IView代表一个视图,最后是要表现为HTML或者其他的HttpResponse的应答流的: IViewEngine提供了类似工厂的作用或者提供器的作用,以返回一个视图. OO的视觉 ...