效果如图

html代码:

<div class="g-bd3 f-cb">
<div class="g-sd31">
<p>我是左侧</p>
</div>
<div class="g-sd32">
<p>我是中间</p>
</div>
<div class="g-mn3">
<div class="g-mn3c">
<p>我是右侧自适应</p>
</div>
</div>
</div>

css代码:

.g-bd3{
width:980px;border:3px ridge #3f34e7;
margin:45px auto;
}
.g-sd31,.g-sd32{
float: left;
width:230px;
position: relative;
}
.g-sd31{
width:190px;
margin-right:10px;
}
.g-mn3{
float: right;
width:100%;
margin-left: -460px;
}
.g-mn3c{
margin-left:440px;
}
.g-bd3 p{
height:150px;
background-color: pink;
padding: 5px;
}

目前为止, 关于布局的NEC了解完毕.

我觉得对于自己组织html和CSS的确有帮助, 同时对于自己的编码也有一定启发.

希望能小中见大, 触类旁通, 达到运用的目的.

NEC学习 ---- 布局 -三列,右侧自适应的更多相关文章

  1. NEC学习 ---- 布局 -三列, 左右定宽,中间自适应

    ---恢复内容开始--- 这个布局很牛掰, 我觉得学习价值很大. 通过这个的学习, 我发现, 能将简单的事情做好, 就距离成功不远了. 其实布局就是利用所学知识, 活用. 在没看这个之前, 发现自己的 ...

  2. NEC学习 ---- 布局 -三列,左侧自适应

    效果图: html代码: <div id="demo4"> <div class="g-bd4 f-cb"> <div class ...

  3. NEC学习 ---- 布局 -两列, 左侧定宽,右侧自适应

    CSS代码:以下两处代码是NEC中CSS初始化样式和功能性样式.今后的NEC研究中,默认这两处是引用的. /* 这是CSS reset 代码 --- 初始化样式 */ /* reset */ html ...

  4. NEC学习 ---- 布局 -两列, 右侧定宽,左侧自适应

    该篇必须引用初始化样式和功能性样式,样式在前篇 http://www.cnblogs.com/Zell-Dinch/p/4436054.html 中已经提及. 上篇中介绍了左侧定宽,右侧自适应的布局, ...

  5. NEC学习 ---- 布局 -两列定宽

    这个布局相对来说比较容易, 就是最外层的容器中包含两个子容器, 一个容器向右浮动, 另一个向左浮动, 两个容器的宽度+2个容器之间的距离等于外层容易的中宽度. html代码: <div clas ...

  6. flex左右布局 左边固定 右侧自适应

    flex左右布局 左边固定 右侧自适应 想要保证自适应内容不超出容器怎么办. 通过为自适应的一侧设置width: 0;或者overflow: hidden;解决. 首先实现标题的布局,也很简单: &l ...

  7. HTML/CSS学习之 三列布局,其中左侧和右侧的部分宽度固定,中间部分宽度随浏览器宽度的变化而自适应变化

    第一种方法:绝对定位 <!DOCTYPE html> <html> <head> <title>三列布局</title> <link ...

  8. 简单的CSS网页布局--三列布局

    三列布局其实不难,不过要用到position:absolute这个属性,因为这个属性是基于浏览器而言,左右部分各放在左右侧,空出中间一列来实现三列布局. (一)三列布局自适应 <!DOCTYPE ...

  9. html布局,左侧固定右侧自适应

    前几天看到我们的UI稿,要实现左侧固定树结构,右侧自适应.想着自己写过几次但是每次都会忘记,在这里做个笔记. 第一种方法: <!DOCTYPE html> <html lang=&q ...

随机推荐

  1. wpf,图片灰化处理

    private BitmapSource ToGray(BitmapSource source) { FormatConvertedBitmap re = new FormatConvertedBit ...

  2. JS实现类似网页的测试考卷

    js实现table中获取不同td的值,并且md5加密,匹配md5的值(避免通过查看网页源代码可以看到正确答案),再用js前端判断输入与正确的值是否相同.最后再把错误的单词计数,并且输出,后端加入对应错 ...

  3. kafka storm hbase性能

    kafka  单台机器部署 1个partition storm 单台机器部署 hbase 四台机器集群 机器配置大概是4G cpu 4G内存 从kafka 读出到storm,然后flush到hbase ...

  4. HTML5中lineCap端点样式遇到closePath()

    定义和用法 lineCap 属性设置或返回线条末端线帽的样式. 注释:"round" 和 "square" 会使线条略微变长. 默认值: butt JavaSc ...

  5. Poj1611The Suspects

    A - The Suspects Time Limit: 1000 MS Memory Limit: 20000 KB 64-bit integer IO format: %I64d , %I64u  ...

  6. 笔记本做wifi热点

    你可以开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网.点开始 所有程序 命令提示符右键管理员身份运行命令提示符 运行命令:ne ...

  7. HTTP请求头详解

    http://blog.csdn.net/kfanning/article/details/6062118 HTTP由两部分组成:请求和响应.当你在Web浏览器中输入一个URL时,浏览 器将根据你的要 ...

  8. Android 应用内存优化 之 onLowMemory & onTrimMemory

    OnLowMemory: 是Android提供的API,在系统内存不足,所有后台程序(优先级为background的进程,不是指后台运行的进程)都被杀死时,系统会调用OnLowMemory.OnTri ...

  9. IOS UI segmentedControl UISegmentedControl 常见属性和用法

    UISegmentedControl中一些常见的属性和用法 //设置以图案作为分段的显示,仅需要图案的轮廓,这样颜色为分段的背景颜色 //    NSArray *items = @[[UIImage ...

  10. 洛谷 P1030 求先序排列 Label:None

    题目描述 给出一棵二叉树的中序与后序排列.求出它的先序排列.(约定树结点用不同的大写字母表示,长度<=8). 输入输出格式 输入格式: 2行,均为大写字母组成的字符串,表示一棵二叉树的中序与后序 ...