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 ...
随机推荐
- 使用show profiles分析SQL性能
如何查看执行SQL的耗时 使用show profiles分析sql性能. Show profiles是5.0.37之后添加的,要想使用此功能,要确保版本在5.0.37之后. 查看数据库版本 mysql ...
- Linux下Gcc生成和使用静态库和动态库详解
参考文章:http://blog.chinaunix.net/uid-23592843-id-223539.html 一.基本概念 1.1什么是库 在windows平台和linux平台下都大量存在着库 ...
- hdu 2199:Can you solve this equation?(二分搜索)
Can you solve this equation? Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 32768/32768 K ( ...
- html5 (个人笔记)
妙味 html5 1.0 <!DOCTYPE html> <html> <head lang="en"> <meta charset=& ...
- 【部分原创】标准C语言的优先级、结合性、求值顺序、未定义行为和非确定行为浅析
零. 优先级 在C++ Primer一书中,对于运算符的优先级是这样描述的: Precedence specifies how the operands are grouped. It ...
- The Suspects 简单的并查集
Description 严重急性呼吸系统综合症( SARS), 一种原因不明的非典型性肺炎,从2003年3月中旬开始被认为是全球威胁.为了减少传播给别人的机会, 最好的策略是隔离可能的患者. 在Not ...
- Spring的replace-method标签
Spring的解析源码 public void parseReplacedMethodSubElements(Element beanEle, MethodOverrides overrides) { ...
- H5开发之Eclipes 编码乱码问题
1.编码不对 a.对某文件或某工程更改编码: 鼠标移到工程名或文件名,右键->Properties->Resource->Text file enCoding ->更改编码(G ...
- LightOJ1417 Forwarding Emails(强连通分量+缩点+记忆化搜索)
题目大概是,每个人收到信息后会把信息发给他认识的一个人如此下去,问一开始要把信息发送给谁这样看到信息的人数最多. 首先找出图中的SCC并记录每个SCC里面的点数,如果传到一个SCC,那么里面的人都可以 ...
- redis AND memcache
memcache文章索引 MEMCACHE问题集锦[转] MEMCACHED 高可用方案 REPCACHED NOSQL之[MEMCACHED]学习 当 MySQL 和 Memcached 遇到尾部空 ...