用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
投稿猜你喜欢
摘要：不同方法读取excel中的多个不同sheet表格性能比较# 方法1def read_excel(path): df=pd.- 在关闭mysql server的时候，可能会由于关闭的方式而出现各种问题。下面的一些步骤，可以减少问题的发生。1.停止复制在一些特殊环境下，
- 微信小程序 微信支付服务端集理论上集成微信支付的全部工作可以在小程序端完成，因为小程序js有访问网络的能力，但是为了安全，不暴露敏感key，
- 自从接触了python，再到机器学习和深度学习，要学习的东西向越拉越多了！！！因为课题的需要接触了tensorflow，我直接就是一个好家伙
- 搞了好几天的表格字体格式，一直想找一种能直接一次性修改表格所有字体格式的方法（函数），但是无论用什么方法都无法修改表格字体的格式，原因应该是
- 今天写这个，要用python去除字符串中的换行符并写入文件，网上查阅，就一句代码replace("\n","&
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 对象测量概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.
- 1. 问题描述对右图进行修改：请更换图形的风格请将 x 轴的数据改为-10 到 10请自行构造一个 y 值的函数将直方图上的数字，位置改到柱
- 我们在做表单的时候经常会使用到这样的结构：<fieldset> <lege
- 前言： 最近正在上一门Python数据处理的课程，要用到Jupyter，于是就先安装了
- 部署 Jenkins请提前在 Linux 上安装 Docker，在 Linux 中，我们使用 Docker 启动 Jenkins，这样可以避
- vue3 表单验证前言表单验证可以有效的过滤不合格的数据，减少服务器的开销，并提升用户的使用体验。今天我们使用 vue3 来做一个表单验证的
- 有了ORM，我们就可以把Web App需要的3个表用Model表示出来：import time, uuidfrom transwarp.db
- 今天对clubot进行了升级, 但是导入数据后中文乱码, 一开是找资料说是在创建引擎的时候添加编码信息:engine = create_en
- 内容： ************* 1安装MYSQL后更改了ROOT的密码后用 net startmysql 启动时我就遇到了这样的问题．使
- 在php中使用Xajax能够即时与数据库发生交互带给用户更好的体验主要的应用有网页的即时、不刷新的登录系统也可以利用于注册系统中即时验证用户
- 本文实例讲述了Python实现计算字符串中出现次数最多的字符。分享给大家供大家参考，具体如下：1. 看了网上挺多写的方法都没达到我所需要的效
- 我最近也在研究MySQL性能优化的路上，那么今天也算个学习笔记吧！在小伙伴们开发的项目中，对于MySQL排查问题找出性能瓶颈来说，最容易发现
- 是在客户端确认还是在服务器端确认？ <SCRIPT LANGUAGE="VBSc
- 写在前面Omi框架可以通过在组件上声明 data-* 把属性传递给子节点。Omi从设计之初，就是往标准的DOM标签的标准传递方式靠齐。比如：
