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 ...
随机推荐
- google svn 服务器使用(免费SVN服务器)
转自:http://hi.baidu.com/%C0%AF%B1%CA%B9%A4%D7%F7%CA%D2/blog/item/d6f6c6d7707d81d0a044df5f.html 1. 进入h ...
- 前端调试效率低?试试这10个“Chrome开发者工具”使用技巧
摘要:今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试,优化页面渲染速度等.希望能提升Web开发人员的工作效率. 今天给大家分享一些使用“Chrome开发者工具”的小技巧.包括调试, ...
- Tomcat中的webapps中的web应用的文件结构
可仿造Tomcat中的webapps下的已有web应用的例子 具体文件结构如下:
- JavaScript案例七:简单生成表格
JavaScript简单生成表格,巩固基础知识点... <!DOCTYPE html> <html> <head> <title>JavaScript简 ...
- pigcms 标签读不出
错误:{pigcms:jc['portrait']} 正确:{pigcms:$jc['portrait']}
- Android Studio 获取 sha1-wangfeng520@
WIN+R 打开“运行” 输入 CMD 回车 2 CD C:\Program Files\Java\jdk1.7.0_71\bin (JDK安装路径) keytool -list -v ...
- LoadRunner字符串与参数的操作及转换技巧
刚开始学LR时,经常搞不清楚变量和参数的区别与用法,最近在一次脚本编写中,整理出来的一些小技巧,与大家一起分享. //字符串复制 strcpy(str,"Hello ") ; // ...
- 水题 HDOJ 4716 A Computer Graphics Problem
题目传送门 /* 水题:看见x是十的倍数就简单了 */ #include <cstdio> #include <iostream> #include <algorithm ...
- Codeforces 161D Distance in Tree(树的点分治)
题目大概是,给一棵树,统计距离为k的点对数. 不会DP啊..点分治的思路比较直观,啪啪啪敲完然后AC了.具体来说是这样的: 树上任何两点的路径都可以看成是一条过某棵子树根的路径,即任何一条路径都可以由 ...
- LightOJ1157 LCS Revisited(DP)
题目求两个字符串s1,s2不同的LCS个数. 经典的求LCS的DP是这样的: LCS[i][j]表示s1[0...i]和s2[0...j]的LCS LCS[i][j]从LCS[i-1][j-1]+1( ...