用CSS3将你的设计带入下个高度[译]（5）
作者：神采飞扬 来源：前端观察 发布时间：2009-06-22 13:03:00
标签：设计,css3,hack,工具
3. 多栏布局
这是新的CSS3 选择器可以让你不用使用多个div标签就能实现多栏布局。浏览器解释这个属性并生成多栏，让文本实现一个仿报纸的多栏结构。
tweetCC 在其首页使用了CSS3 多栏选择器
tweetCC 在其首页上将介绍文字显示为四栏。这四栏并非浮动的div；相反，设计师使用下面的CSS3 多栏布局：
.index #content div {
-webkit-column-count : 4;
-webkit-column-gap : 20px;
-moz-column-count : 4;
-moz-column-gap : 20px;
}
我们可以通过这个选择器定义三件事情：栏数(column-count)、栏宽(column-width、例子中没有用到)和各栏之间的空白/间距(column-gap)。 如果column-count未设定，浏览器会在允许的宽度内容纳尽可能多的栏目。
为了在各栏时间添加一个数值的分隔，我们可以使用column-rule 属性，其功能和border 属性类似:
div {
column-rule: 1px solid #00000;
}
上面的这条属性，浏览器中不会看到任何效果，因为它没有分栏，如果配合上面的例子就可以了。
相关属性: column-break-after, column-break-before, column-span, column-fill.
浏览器支持: 多栏布局目前被Safari 3+，chrome，和Firefox 1.5+所支持。
扩展阅读：
0
投稿猜你喜欢
- 最近遇到SQL Server 2005 输入框不能输入中文，在网上查了N久，试验了十几次奏这个法子有用：“把你表中的自动编号列放到最后面”。
在广大网友心目中，他们就是中国互联网搜索领域的三驾马车。无论这三家搜索巨头承不承认，在网友眼中总会来将他们进行对比比较。当然，更多时候的比较- 有些时间没更新blog了，这两天为了更新<code collection>，于是重写了语法高亮的模块，这次是一个引擎，你可以根据
- 先按照下面的表结构创建mysql_order_by_test数据表，我们用实例一点一点告诉你，MySQL order by的用法。ORDER
- 随着网络的发展，网速和机器速度的提高，越来越多的网站用到了丰富客户端技术。而现在Ajax则是最为流行的一种方式。JavaScript是一种解
- 最近在查看asp之家的访客统计时，发现访客使用firefox浏览器的占了10％-15％，而大部分的访客使用的是IE6,呵呵我也是用IE6。而
- <％ &nbs
- 一个用asp来处理jmail发信的过程，及使用方法. 发信时，直接调用这个过程就行了，很方便。<％ dim
- 众所周知IE6不支持position:fixed，这个bug与IE6的双倍margin和不支持PNG透明等bug一样臭名昭著。前些天我做自己
- 在ASP中Request对象是获取客户端提交数据的一个很重要的对象，大家对他也是非常熟悉了。 虽然如此，还是经常有人问我下面的几种写法有什么
- ASP，一种最先广泛的流行在WEB行业的编程语言。严格的说，ASP还算不上的编程语言。不过，因为微软的大力支持，ASP这一路，走得非常顺利。
- 在SQL Server 2008里安装审计，步骤如下：1. 给每个SQL Server 2008具体实例创建一个SQL Server审计2.
- SQL中的单记录函数1.ASCII返回与指定的字符对应的十进制数;SQL> select ascii('A') A,a
- 内容摘要：这篇文章的主旨是弄清楚如何根据实际需求实现一个联动菜单以及联动菜单的原理，实例是实现一个日期选择下拉菜单。首先来分析一下日期下拉菜
- 在Web 开发中，JavaScript的一个很重要的作用就是对DOM进行操作，可你知道么？对DOM的操作是非常昂贵的，因为这会导致浏览器执行
- ［前言：］ASP.NET是微软提供的最新的开发基于Web的应用程序的技术。它提供了大量的比传统ASP脚本技术的好处，包括：1）通过把UI表现
- 在过去的两年里，你能想象的一些很烂的应用设计也入驻了优雅的iPhone。通过它周边的宣传，使得世界各地的设计者们都利用这个新的移动工具来一展
- myisam_max_[extra]_sort_file_size足够大delay_key_write减少io,提高写入性能bulk_ins
- 简介这是一篇介绍网页设计原则的文章。在互联网迅速发展的今天，各种web 2.0网站竞争激烈，你死我亡。Jini, D
- 下面是IN条件运算符的SQL语句：SELECT column1, SUM(column2) FROM&nbs
