[css layout][07] three fixed columns
2013-11-11 20:37
411 查看
![](http://images.cnitblog.com/blog/472709/201311/11201519-f46f4f41853a4a85abd5a817ec651eaf.png)
1.
#container { width: 900px; margin: 0 auto; } #wrapper { float: left; } #content { margin: 0 200px; } #navigation { width: 200px; float: left; margin-left: -100%; } #extra { width: 200px; float: left; margin-left: -200px; } #footer { clear: both; }
2.
#container { width: 900px; margin: 0 auto; } #wrapper { float: right; } #content { margin: 0 200px; } #navigation { width: 200px; float: right; margin-right: -200px; } #extra { width: 200px; float: right; margin-right: -100%; } #footer { clear: both; }
3.
#container { width: 900px; margin: 0 auto; } #wrapper { float: right; width: 500px; margin-left: -200px; position: relative; left: -200px; } #navigation { width: 200px; float: right; margin-left: -400px; position: relative; left: -400px; } #extra { width: 200px; float: right; margin-right: -300px; } #footer { clear: both; }
4
#container { width: 900px; margin: 0 auto; } #wrapper { float: left; width: 500px; margin-right: -200px; position: relative; left: 200px; } #navigation { width: 200px; float: left; margin-left: -300px; } #extra { width: 200px; float: left; margin-right: -400px; position: relative; left: 400px; } #footer { clear: both; }
相关文章推荐
- jQuery Mobile基础07----jQuery Mobile Widgets(2)-listview(列表视图
- Android_07_监控应用的状态
- Android 07:Android的国际化应用
- python 学习笔记(07)
- 07(maven+SSH)网上商城项目实战之springmvc乱码问题
- 07 java.awt.Robot的一些使用
- 07-渲染流程-5-Sprite渲染-QuadCommand
- psql-07表:分区表
- 浏览器-07 chromium 渲染1
- Python进阶07 函数对象
- 【线性代数】 07 - 线性函数
- Python标准库07 信号 (signal包,部分os包)
- 07-应用管理(字典转模型)
- 【原创】开源Math.NET基础数学类库使用(07)常用的数学物理常数
- Effective C++学习笔记 条款07:为多态基类声明virtual析构函数
- 07--swift之枚举
- iOS之07-三大特性之多态 + NSString类
- 07 霞拍,工程介绍
- iOS UICollectionView 入门 07 点击cell放大图片
- 软件工程课堂测试07(结对开发)