提升你设计水平的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
投稿猜你喜欢
在公司做分布式深网爬虫，搭建了一套稳定的代理池服务，为上千个爬虫提供有效的代理，保证各个爬虫拿到的都是对应网站有效的 * ，从而保证爬虫快- 本文实例讲述了python基于右递归解决八皇后问题的方法。分享给大家供大家参考。具体分析如下：凡是线性回溯都可以归结为右递归的形式，也即是二
- 1.简介： java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包。 它包括两个类：Pattern和Ma
- 最近在研究python调度框架APScheduler使用的路上，那么今天也算个学习笔记吧！# coding=utf-8""
- 在过去的几十年里，机器学习对世界产生了巨大的影响，而且它的普及程度似乎在不断增长。最近，越来越多的人已经熟悉了机器学习的子领域，如神经网络，
- pyautogui是一个可以控制鼠标和键盘的python库，类似的还有pywin32。pyautogui的安装pip3 install py
- JavaScript中的typeof其实非常复杂,它可以用来做很多事情,但同时也有很多怪异的表现.本文列举出了它的多个用法,而且还指出了存在
- Vue使用Swiper看这一篇就够了此案例实现需求完成swiper动态异步数据下的slide渲染自定义分页器样式解决loop:true设置时
- var getWindow = function(obj) { var&nbs
- 本文大纲glob模块也是Python标准库中一个重要的模块，主要用来查找符合特定规则的目录和文件，并将搜索的到的结果返回到一个列表中。使用这
- 有时候,为了数据方便导出导入SQL,我们可以借助一定的工具,方便我们队数据库的移植,可以达到事半功倍的效果.在这里,就给大家简单的介绍一款能
- 在说到什么是回表查询的时候，有两个概念需要先解释清楚：分别是聚集索引(聚簇索引)和非聚集索引(非聚簇索引)聚集索引和非聚集索引MySQL规定
- python的uuid都是32位的，比较长，处理起来效率比较低，本算法利用62个可打印字符，通过随机生成32位UUID，由于UUID都为十六
- 我就废话不多说了，大家还是直接看代码吧~func ReadLine(fileName string) ([]string,error){f,
- 目录抽象和复用串行分段串行，段中并行总结前言：JS 天然支持并行请求，但与此同时会带来一些问题，比如会造成目标服务器压力过大，所以本文引入“
- 本文讲述了Python使用pip安装报错：is not a supported wheel on this platform的解决方法。分享
- 前言在之前的面试过程中,问到执行计划,有很多童鞋不知道是什么?甚至将执行计划与执行时间认为是同一个概念。今天我们就一起来了解一下执行计划到底
- //金额的格式化s为要格式化的参数（浮点型），n为小数点后保留的位数 function formatMoney(s,n){ n = n>
- while循环只要循环条件为True（以下例子为x > y），while循环就会一直 执行下去：u, v, x, y = 0, 0,
- 一、 模块1、模块的概念模块是 Python 程序架构的一个核心概念每一个以扩展名 py 结尾的 Python 源代码文件都是一个 模块模块
