效果如图

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的确有帮助, 同时对于自己的编码也有一定启发.

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

最新文章

  1. 网络第一节——NSURLConnection
  2. 五一干货来袭!开源Moon.Orm标准版发布!
  3. Thinkphp源码分析系列(四)–Dispatcher类
  4. Git本地提交到远程指定分支
  5. 透过proxy进行docker pull(Centos6.8)
  6. smartjs - DataManager API
  7. js中等性操作符(==)、关系操作符(&lt;,&gt;)和布尔操作符(!)比较规则
  8. 【转】google play上传应用
  9. Linux系统编程(6)——文件系统
  10. iOS在Xcode6中添加空模板
  11. hdu Diophantus of Alexandria(素数的筛选+分解)
  12. c/c++ 基金会(七) 功能覆盖,虚函数,纯虚函数控制
  13. Masonry的简单使用
  14. Gradle之恋-任务1
  15. Flink从入门到放弃(入门篇4) DataStreamAPI
  16. solr部署tomcat 访问HTTP Status 403 – Access to the requested resource has been denied
  17. UNITY 打包时提示sdk tools 或 sdk build tools版本低时可以直接点update 按钮进行更新
  18. 使用firefox插件httperrequest,模拟发送及接收Json请求 【转】
  19. iOS Swift WisdomScanKit二维码扫码SDK,自定义全屏拍照SDK,系统相册图片浏览,编辑SDK
  20. ios中布局(推荐一)

热门文章

  1. Dapper ORM 用法—Net下无敌的ORM(转)
  2. flume 使用 spool source的时候字符集出错
  3. HBase Shell 常见操作
  4. MFC 重载退出(窗口顶上最右边的x按钮)
  5. 每天一个linux命令--awk
  6. TXT文件去除多余空行
  7. web移动端性能调优及16ms优化
  8. Codeforces Round #249 (Div. 2) A - Queue on Bus Stop
  9. objective-c 通过类名实例化类
  10. 【转载】LoadRunner11下载以及详细破解说明