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 ...
随机推荐
- 新浪SAE部署 503 JDK版本冲突解决
上午把本地调试好的微信应用部署到SAE上,结果访问503错误.关键日志:—————————————————————————————————org.eclipse.jetty.servlet.Servl ...
- oracle 10g 学习之PL/SQL简介和简单使用(10)
PL /SQL是一种高级数据库程序设计语言,该语言专门用于在各种环境下对ORACLE数据库进行访问.由于该语言集成于数据库服务器中,所以PL/SQL代码可以对数据进行快速高效的处理.PL/SQL是 P ...
- oracle 卸载步骤(图解)
1.卸载第一步:点击开始菜单: 步骤阅读 2 2.点击Universal Installer来实现下面 步骤阅读 3 3.点击卸载产品后出现的内容: 步骤阅读 4 4.点击打开Oracle主目录下的O ...
- SOAPFaultException
javax.xml.ws.soap.SOAPFaultException: String index out of range: -6 at org.apache.cxf.jaxws.JaxWsCli ...
- C# 6新特性及示例代码
今天推荐的其实是一个Github开源项目,不过这个开源项目是专门介绍C# 6的最新特性,并给出了示例代码. 我们知道,微软即将发布Windows 10和Visual Studio 2015,在VS20 ...
- 转载:关于Matlab GUI的一些经验总结
去年做了一些关于Matlab GUI的程序,现在又要做相关的东西,回想起来,当时很多经验没有记录下来,现在回顾起来始终觉得不爽,所以从现在开始,一定要勤写记录. 从简单的例子说起吧. 创建Matlab ...
- XmlBeanFactory的Bean加载
如何使用这些bean,bean加载的探索: MyTestBean bean=(MyTestBean) bf.getBean("myTestBean"); AbstractBeanF ...
- Codeforces Round #330 (Div. 2)
C题题目出错了,unrating,2题就能有很好的名次,只能呵呵了. 水 A - Vitaly and Night /***************************************** ...
- CSS:权重和层叠规则决定了其优先级
首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...
- C#中DataTable使用技巧
在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...