用于WebKit的CSS诀窍[译]（4）
作者：vocal 来源：前端观察 发布时间：2009-03-11 20:03:00
标签：css,浏览器,Safari,Chrome,WebKit
CSS 多卷布局
使用纯CSS实现多卷，而不用HTML的table是件相当棘手的事情。由于CSS3用于多卷布局的属性在Safari和WebKit中已经可用，你可以明确的定义卷数，正确实现你所想要的效果。先看一下下面的CSS和HTML代码：
#columns {
-webkit-column-count: 3;
-webkit-column-gap: 25px;
-moz-column-count: 3;
-moz-column-gap: 25px;
column-count: 3;
column-gap: 25px;
}
<div id="columns">
<p>Column A</p>
<p>Column B</p>
<p>Column C</p>
</div>
这些代码定义了卷中的HTML代码。这些代码定义了这个DIV应该被分成3卷。每个段落就在他们自己的卷里面。
这些代码同样说明了一种在使用一种尚未成为W3C标准的一部分时的可靠机制.这段代码指定了”column-count”和”column-gap”属性，并带有”-webkit”和”-moz”前缀，以及没有前缀的情况。这意味着这段代码将会像基于Mozilla的浏览器一样可以在Safari和WebKit的浏览器中运行，而且一旦CSS3标准被最终确定下来之后，那些前缀就可以去掉了。
你可以在下面看到效果：
截图5. 多卷
使用这种方法， 如果浏览器不支持多卷布局，段落将一个接着一个显示。正如本文前面提到的，这些方法在不支持它们的浏览器中会被降级（也就是无效）。
0
投稿猜你喜欢
- 本文实例讲述了Go语言实现的简单网络端口扫描方法。分享给大家供大家参考。具体实现方法如下：package mainimport (
前言检测图像中对象颜色的一种简单方法是首先将图像从 RGB 转换为 HSV 颜色空间，然后使用一系列色调检测对象，这可以通过使用 OpenC- 先上一张效果图：以前用angularjs操作基本上都是要取到每个列表的id再循环判断是不是当前点击的列表来显示折叠。今天在这个项目 http
- Python 语言里有许多（而且是越来越多）的高级特性，是 Python 发烧友们非常喜欢的。在这些人的眼里，能够写出那些一般开发者看不懂的
- 关于Python语言，众说纷纭，但无外乎两种，强大，垃圾。大多数人还是对Python持肯定意见，认为它很强大。前些天和两个的大学同学聊天，一
- 1.apache 在如下页面下载apache的for Linux 的源码包 http://www
- 有一次去超市换货，本能的找到服务中心，服务中心说这个业务在超市旁边一个房间里，由于忘记带小票，那个小房间的人让我去另外一个小房间调电脑里的记
- 首先来看GIF操作：情况一：空格被过滤使用括号()代替空格，任何可以计算出结果的语句，都可以用括号包围起来；select * from(us
- 前言不知道什么是版本库的，扇自己两个大嘴巴；知道但不用的，扇自己四个大嘴巴。快扇去。你真扇了？那你是个大傻瓜。扇什么扇，有扇自己的功夫，还不
- 1.场景描述我们公司是做电商的，运营的工作指标都是按周来定的，所以他们对周特别敏感，希望我们能在日期选择器上显示周数。刚接到这个需求时，心中
- 环境python版本号系统游览器python 3.7.2win7google chrome关于本文本文将会通过爬虫的方式实现简单的百度翻译。
- 表 table1 id RegName PostionSN PersonSN 1 山东齐鲁制药 223 2 2 山东齐鲁制药 224 2 3
- 1、下载pycharmpycharm是一种Python IDE，能够帮助我们在编写代码时提高效率。网上提供的有专业版和教育版之分。专业版是收
- 连接数据库：mysql -u用户名 -p密码导入数据 source d:\create.sql用下面的语句就可以导出mysql中的数据了：m
- Linux环境MySQL服务器级优化讲解 摘要：本节简单介绍了如何在服务器级优化数据库的性能
- 手痒痒系列之简单的放大镜写了个放大镜功能，可以设置显示的宽高width,height显示的位置，float ‘left’ 'righ
- Serializer序列化器定义Serializer1. 定义方法Django REST framework中的Serializer使用类来
- 本文实例讲述了Python2.7中SQLite3基本操作方法。分享给大家供大家参考，具体如下：1、基本操作# -*- coding: utf
- 在我们有时需要迁移或部署项目时，需要知道项目所依赖的三方包和版本，下面就来一看一看该如何获取吧：1、首先安装pipreqs库使用pip命令，
- 玩过电脑游戏的同学对于 * 肯定不陌生，但是你在用 * 的时候有没有想过如何做一个 * 呢？（当然用 * 不是那么道义哈，呵呵），那我们就来看一下如
