提升你设计水平的CSS3新技术[译]（4）
作者：暴风彬彬 来源：彬go 发布时间：2009-08-02 20:51:00
标签：设计,浏览器,CSS3,新技术
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-coun)、栏宽(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
投稿猜你喜欢
- 其实就是利用文件“global.asa”！许多ASP编程新手都想知道这东西是什么？事实上，global.asa就是一个事件驱动程序，其中共包
- 对数据库的备份是网站管理人员的必修课，那么常用的数据库备份方式有哪些呢？应如何选择？数据库备份有四种类型，分别应用于不同的场合，下面简要介绍
- 如何用ASP发送带附件的邮件？请问如何用CDONTS组件发送带附件的邮件？ 见下列代码：<％&nb
- 最近有网友在留言板里问到jRaiser和jQuery的冲突问题，特此写一篇文章进行解释。冲突的根源众所周知，jQuery是通过一个全局变量$
- 我的长博文不少，比较影响阅读体验，有必要添加一个文章目录功能。相比 Wordpress， Typecho 的插件就比较少了。我想找一个像掘金
- 第一类人，用户体验无所不能。第二类人，用户体验无所不包括。第三类人，用户体验只是指导思想。用户研究通常是做创新的工作，也就注定只少数有财力、
2009年 6月6日,空间4岁啦！与此同时Qzone月登录用户2亿，同时在线用户也突破了1000万。这是让人欢欣雀跃的数字，在空间同事眼里，- meta是html语言head区的一个辅助性标签。几乎所有的网页里，我们可以看到类似下面这段的html代码：＜head＞ ＜meta&nbs
- 在了解了JavaScript1.7的相关更新后，我们再继续关注JavaScript1.8的新特性。在W3C Group带来的JavaScri
- 阅读上一篇：FrontPage2002简明教程五：css样式表的应用 用户可以快速和容易地创建图片库，以显示图片或图像。他们可以将图像添加到
- 这些列举的网站，站内还有大量的效果，希望大家多去找找，对于研究的朋友来说，更是很棒的源码参考。第5款的东东，很强很震撼...1、$fx()简
- 事务日志文件Transaction Log File是用来记录数据库更新情况的文件，扩展名为ldf。在 SQL Server 7.0 和 S
- 前两天在做一个站内版的企搜引擎，发现某些站点可以链接站点内容。。奇怪之下看了看，原来是按照数据库ID的自动编号规律进行链接的~~闲暇之余弄了
- IE历来被web标准的拥护者所诟病，而当FireFox横空出世以后，更多的网页制作者开始关注web标准设计。看着FireFox的市场占有率不
- 摘要：Oracle和微软都是数据库方面的大厂商，采用两家的产品的企业也不少。今天这篇文章为大家对比Oracle和SQLServer的镜像。标
- 描述 嵌入在你的web页面中的导航元素能够降低你的搜索引擎评价排名并且降低你的网站的响应性能。本文作者想同你一起探讨如何使用AJAX技术来解
- 在第一部分和第二部分中我们分别介绍了改善网站性能中页面内容和服务器的几条守则，除此之外，JavaScript和CSS也是我们页
- 如何用Sleep函数编译一个定时组件？见下： Private Declare Sub Sleep L
- 一般情况下，访问或设置剪贴板，IE 只需使用 window.clipboardData 的 getData 或 setData 方法即可。M
- 概述我在教学和实际设计中的一些心得。就不长篇大论了！让大家省些时间，捞干的。尽量通俗易懂。想知道怎样设计标志，就要知道什么是标志？标志：外来
