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 ...
随机推荐
- nginx增加ssl服务方法
1.将申请到的ssl加密证书文件拷贝到nginx的conf目录下 如:server.pem.server.key 2.vim nginx.conf 例子: server { listen 443 ss ...
- STL 常见操作
stl的操作不是很熟练, 记录一下 1.vector: 排序: sort(vc.begin(),vc.end()); 去重: sort(vc.begin(),vc.end()); num.erase( ...
- C#学习笔记(五)——函数
一.定义和使用函数. 直接通过例子进行说明吧 class Program { static void Write() { Console.WriteLine("Test output fro ...
- Nightmare
Nightmare Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/32768 K (Java/Others)Total S ...
- Java IO操作
转自:http://www.cnblogs.com/jyan/articles/2505791.html Johnny Yan的博客 1 InputStream类型 InputStream的作用是标志 ...
- TYVJ P1007 排座椅 Label:多想想输出 水
背景 NOIP2008年普及组第二题 描述 上课的时候总有一些同学和前后左右的人交头接耳,这是令小学班主任十分头疼的一件事情.不过,班主任小雪发现了一些有趣的现象,当同学们的座次确定下来之后,只 ...
- 学习了ZKW费用流
所谓ZKW费用流,其实就是Dinic. 若干年前有一个人发明了最小增广路算法,每次用BFS找一条增广路,时间O(nm^2) 然后被DinicD飞了:我们为什么不可以在长度不变时多路增广呢?时间O(n^ ...
- linux下安装7z命令及7z命令的使用
本文主要介绍了在linux下安装7z命令的方法,同时介绍了7z命令的使用.7z压缩格式拥有众多优点,具有极高的压缩比率,如果你还不了解,请看文章:7z格式.LZMA压缩算法和7-Zip详细介绍. re ...
- javamail发送邮件的简单实例
今天学习了一下JavaMail,javamail发送邮件确实是一个比较麻烦的问题.为了以后使用方便,自己写了段代码,打成jar包,以方便以后使用.呵呵 以下三段代码是我的全部代码,朋友们如果想用,直接 ...
- SSH自定义分页标签
本文参考文章:http://blog.csdn.net/qjyong/article/details/3240303 一.标签处理类: package cn.conris.sys.form; impo ...