我的栅格系统实现
作者：grace 来源：gracecode.com 发布时间：2008-09-21 13:50:00
如果没有了解栅格系统是什么，建议看完这篇文章以后再回来。
其实有很种 CSS 写法实现栅格系统，很多 CSS 库也都会提供类似的栅格系统实现（譬如：YUI，BluePrint）。
引用 One True Layout 文中所言，良好的布局应该具有的几个特性：
具有一定的灵活性
等高
基于栅格
请允许我“重复造了轮子”，我的栅格系统实现是基于“伪绝对定位布局”，这样可以更好的实现上述所言的几个特征（很难解释，还是直接看 DEMO ）。
http://lab.gracecode.com/demo/grid.html
如何使用上面定义的 CSS 栅格？很简单，只需要定义一行内列的数量以后，再定义列占据的相应栅格宽度以及开始位置即可。譬如定义某列占据 17 个栅格、并从第 3 个栅格开始排版，那么使用下面的 class
column-17 start-03
类似的，如果是通栏，那么就是占据 24 个栅格，并从第一个栅格开始（以 Taobao UED 定义的 950px 宽度为公式 W ）
column-24 start-01
因为是上述“伪绝对定位”的布局，所以相应列之间不会相互影响。而理解上述布局可能需要些时间，同时感谢师兄那么详细的讲解，我相信也会给你带来收获。
黄金分割标准：右边的大小一般是左边大小的黄金比例
平分：在1024的分辨率下，一般采用330左右的分割
两栏分割：左边660 右边260左右
三栏分割：左边是200左右 中间400左右 右边300左右
三栏分割：右边两栏之和是左边的0.618
三栏分割：中间180 两边分别为380左右
很难具体的解释其中的细节，但是希望有问题的朋友能够留言，我尽量帮你解答。
0
投稿猜你喜欢
- 这段时间因为要做个网站，而空间又不支持ASP，所以又拿起JavaScript教程看了下，看能不能在静态的空间里实现动态，当然，这个动态不是真
- 信号(signals)Flask信号(signals, or event hooking)允许特定的发送端通知订阅者发生了什么（既然知道发生
- 深度遍历：原则：从上到下，从左到右逻辑（本质用递归）：1）、找根节点2）、找根节点的左边3）、找根节点的右边class Node(objec
- 怎样才能将在表A取得的数据插入另一个表B中？（1）对于表A和表B两个表结构完全相同的话〔字段个数，相应字段的类型等等〕，可以使用 inser
- JavaScript中没有Trim函数，VBScript语言中才有这个函数，就是去掉字符串头和尾的空格。您可以访问这篇文章:《增加 java
使用 Appium安装一下 Python 用到的模块pip install Appium-Python-Client获取好友列表在 Pych- 在IE中，在使用checkbox或radio时，你会发现有时不能通过CheckBoxObject.checked = true或CheckB
- 1.安装MySql目前MySQL有两种形式的文件，一个是msi格式，一个是zip格式的。msi格式的直接点击setup.exe就好，按照步骤
- 概述pydicom是一个常用python DICOM parser。但是，没有提供解析多帧图的示例。本文结合相关函数和DICOM知识做一个简
- 1. *表示匹配任意多个字符 \d*表示匹配任意多个数字字符import retext = "
- 项目输出项目先决条件要使用python构建井字游戏，我们需要tkinter模块和python的基本概念Tkinter模块是用于渲染图形的标准
- Python程序可以处理多种方式的日期和时间。日期格式之间的转换是一种常见计算机的杂活。 Python的时间和日历模块，能帮助处
- baiduclient.pyimport urllib.parseimport gzipimport jsonimport refrom h
- 一般常用的有两个方法：1、使用DataFrame.index = [newName]，DataFrame.columns = [newNam
- 一般在本机上完成基于Flask框架的代码编写后，如果有接口或者数据操作方面需求需要把代码部署到指定服务器上。一般情况下，使用Flask框架开
- 前言最近助教改作业导出的成绩表格跟老师给的名单顺序不一致，脑壳一亮就用pandas写了个脚本自动吧原始导出的成绩誊写到老师给的名单中了哈哈哈
- 前言undefined 和 null 的区别是个老生常谈的话题了，之前我对二者的区别只是简单理解，例如二者转成 Boolean 类型都是 f
- 前言本文主要给大家介绍了关于Django中CBV和FBV的相关内容，分享出来供大家参考学习，下面话不多说了，来一起看看详细的介绍吧。一、&n
- 场景描述今天在将 Hive 表同步到 MySQL 之后，其中有一列是唯一列，但是在 MySQL 中查询的时候 count 与 distinc
- 常规的异常捕获方式在 Promise 提供了一个 .catch 方法用来捕获异常，假设有很多异步请求，通常会把 .catch 方法放在链式调
