该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及。

上篇中介绍了左侧定宽,右侧自适应的布局,这篇将介绍类似布局,只是换成了右侧定宽,左侧自适应。

html方面

  1. <div class="zell-dm2 g-bd2 f-cb">
  2. <div class="g-mn2">
  3. <div class="g-mn2c">
  4. <p>
  5. 我是左侧
  6. </p>
  7. </div>
  8. </div>
  9. <div class="g-sd2">
  10. <p>
  11. 我是右侧
  12. </p>
  13. </div>
  14. </div>

那么针对这一块,实现的效果如图:

针对这块的css代码如下:

  1. .g-sd2{
  2. float: right;
  3. position: relative;
  4. width:220px;
  5. margin-left:-220px;
  6. background: red;
  7. }
  8. .g-mn2 {
  9. float: left;
  10. width:100%;
  11. }
  12. .g-mn2c {
  13. margin-right: 230px;
  14. }
  15. .zell-dm2 p{
  16. background: pink;
  17. height:300px;
  18. padding:5px;
  19. }

思路和左侧定宽一模一样,很简单,赶快动手试试吧!

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. 新浪SAE部署 503 JDK版本冲突解决

    上午把本地调试好的微信应用部署到SAE上,结果访问503错误.关键日志:—————————————————————————————————org.eclipse.jetty.servlet.Servl ...

  2. oracle 10g 学习之PL/SQL简介和简单使用(10)

    PL /SQL是一种高级数据库程序设计语言,该语言专门用于在各种环境下对ORACLE数据库进行访问.由于该语言集成于数据库服务器中,所以PL/SQL代码可以对数据进行快速高效的处理.PL/SQL是 P ...

  3. oracle 卸载步骤(图解)

    1.卸载第一步:点击开始菜单: 步骤阅读 2 2.点击Universal Installer来实现下面 步骤阅读 3 3.点击卸载产品后出现的内容: 步骤阅读 4 4.点击打开Oracle主目录下的O ...

  4. SOAPFaultException

    javax.xml.ws.soap.SOAPFaultException: String index out of range: -6 at org.apache.cxf.jaxws.JaxWsCli ...

  5. C# 6新特性及示例代码

    今天推荐的其实是一个Github开源项目,不过这个开源项目是专门介绍C# 6的最新特性,并给出了示例代码. 我们知道,微软即将发布Windows 10和Visual Studio 2015,在VS20 ...

  6. 转载:关于Matlab GUI的一些经验总结

    去年做了一些关于Matlab GUI的程序,现在又要做相关的东西,回想起来,当时很多经验没有记录下来,现在回顾起来始终觉得不爽,所以从现在开始,一定要勤写记录. 从简单的例子说起吧. 创建Matlab ...

  7. XmlBeanFactory的Bean加载

    如何使用这些bean,bean加载的探索: MyTestBean bean=(MyTestBean) bf.getBean("myTestBean"); AbstractBeanF ...

  8. Codeforces Round #330 (Div. 2)

    C题题目出错了,unrating,2题就能有很好的名次,只能呵呵了. 水 A - Vitaly and Night /***************************************** ...

  9. CSS:权重和层叠规则决定了其优先级

    首先,给大家看一篇关于CSS优先级的示例:http://www.ido321.com/76.html 一.基本的优先级规则 比较同一级别的个数,数量多的优先级高,如果相同即比较下一级别的个数,至于各级 ...

  10. C#中DataTable使用技巧

    在项目中经常用到DataTable,如果DataTable使用得当,不仅能使程序简洁实用,而且能够提高性能,达到事半功倍的效果,现对DataTable的使用技巧进行一下总结. 一.DataTable简 ...