[css layout][12] three fixed columns
2013-11-15 21:05
176 查看
![](http://images.cnitblog.com/blog/472709/201311/15205519-9775fef435154cec8697ed9388f9755e.png)
1.float向左。#wrapper宽度900px
#container { width: 900px; margin: 0 auto; } #wrapper { width: 900px; float: left; } #content { margin-left: 400px; } #navigation { width: 200px; float: left; margin-left: -700px; } #extra { width: 200px; float: left; margin-left: -900px; } #footer { clear: both; }
2.float向右。#wrapper宽度900px
#container { width: 900px; margin: 0 auto; } #wrapper { width: 900px; float: right; } #content { margin-left: 400px; } #navigation { width: 200px; float: right; margin-right: -400px; } #extra { width: 200px; float: right; margin-right: -200px; } #footer { clear: both; }
3.float向右。#wrapper宽度500px
#container { width: 900px; margin: 0 auto; } #wrapper { width: 500px; float: right; } #navigation { width: 200px; float: right; } #extra { width: 200px; float: right; } #footer { clear: both; }
4.float向左。#wrapper宽度500px
#container { width: 900px; margin: 0 auto; } #wrapper { width: 500px; float: left; margin-right: -400px; position: relative; left: 400px; } #navigation { width: 200px; float: left; margin-right: -100px; position: relative; left: 100px; } #extra { width: 200px; float: left; margin-left: -200px; } #footer { clear: both; }
相关文章推荐
- 图灵2010.12书讯
- 微信公共服务平台开发(.Net 的实现)12-------网页授权(上 :更加深入理解OAuth2.0 )
- 【C#进阶系列】12 接口
- 20170722Windows12_1_虚拟内存
- 一点小感慨(12-8)
- 编写高质量代码改善C#程序的157个建议[10-12]
- ElasticSearch学习12_ES插件安装方法_离线安装和联网安装
- 20170723Windows12_2_内存修改器
- 2010 12 12
- 【PyQt4实例12】Graphics Item 的各种变形
- NYOJ 题目12 喷水装置(二) 最小区间覆盖问题
- 【12】PMP一模模糊知识点整理20170724
- Silverlight/WPF/WP7一周学习导读(12月6-12月12)
- 龙书笔记(12)
- 晴(大风) 12℃ 3.24日
- 数据库——(12)数据备份与还原
- jQuery勇夺JavaScript库MVP的12大理由
- 从零单排c++ primer(12)
- JavaSe基础(12)--多态(精练)
- vmware12安装Mac10.0系统