CSS3实战之多列
CSS2中如果要设计多列布局，常用的方法有浮动和定位，但是浮动容易错位，定位无法满足模块的自适应能力，以及模块之间的文档流联动的需要。为了解决多列布局的难题，CSS3新增了多列自动布局功能。
利用多列布局属性可以自动将内容按指定的列数排列，这种特性特别适合报纸和杂志类网页布局。
1.columns
可以取的值有
.test{columns:<column-width> || <column-count>}
比如
.test{columns:250px 3;}
意思为，250px一列，总共三列。
放一篇文章上来试试
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
-webkit-columns: 250px 3;
columns: 250px 3;
}
h1 {
color:#333333;
background:#DCDCDC;
padding:5px 8px;
font-size:20px;
text-align:center;
padding:12px;
}
h2 {
font-size:16px;
text-align:center;
}
p {
color:#333333;
font-size:14px;
line-height:180%;
text-indent:2em;
}
</style>
<title>columns</title>
</head>
<body>
<h1>故都的秋（选段）</h1>
<h2>郁达夫</h2>
<p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别 地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p>
<p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p>
<p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p>
<p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p>
<p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p>
<p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p>
</body>
</html>
效果是这样的
2.column-gap
可以控制两列之间的间距
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:3em;
-moz-column-gap:3em;
column-gap:3em;
line-height:2.5em;
}
h1 {
color:#333333;
background:#DCDCDC;
padding:5px 8px;
font-size:20px;
text-align:center;
padding:12px;
}
h2 {
font-size:16px;
text-align:center;
}
p {
color:#333333;
font-size:14px;
line-height:180%;
text-indent:2em;
}
</style>
<title>column-gap</title>
</head>
<body>
<h1>故都的秋（选段）</h1>
<h2>郁达夫</h2>
<p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别 地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p>
<p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p>
<p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p>
<p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p>
<p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p>
<p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p>
</body>
</html>
3.column-rule
可以定义每列之间边框的宽度、样式和颜色。
语法如下
.test{
column-rule:<column-rule-width>;
column-rule:<column-rule-style>;
column-rule:<column-rule-color>;
column-rule:<transparent>;
}
给刚才的文章加上虚线分隔
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css" media="screen">
body {
-webkit-column-count:3;
-moz-column-count:3;
column-count:3;
-webkit-column-gap:3em;
-moz-column-gap:3em;
column-gap:3em;
line-height:2.5em;
-webkit-column-rule:dashed 2px gray;
-moz-column-rule:dashed 2px gray;
column-rule:dashed 2px gray; }
h1 {
color:#333333;
background:#DCDCDC;
padding:5px 8px;
font-size:20px;
text-align:center;
padding:12px;
}
h2 {
font-size:16px;
text-align:center;
}
p {
color:#333333;
font-size:14px;
line-height:180%;
text-indent:2em;
}
</style>
<title>column-rule</title>
</head>
<body>
<h1>故都的秋（选段）</h1>
<h2>郁达夫</h2>
<p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别 地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p>
<p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p>
<p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p>
<p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p>
<p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p>
<p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p>
</body>
</html>
效果如下
4.column-span
可以定义跨列显示
column-span只有两种取值，一种是不跨列，取值为1，一种是跨列，取值为all
.test{
column-span:;
column-span:all;
}
5.column-fill
定义栏目高度
.test{
/*随内容变化*/
column-fill:auto;
/*根据内容最多列的高度进行统一*/
column-fill:balance;
}
CSS3实战之多列的更多相关文章
- 160427、CSS3实战笔记--多列布局
通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5 多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...
- 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.
笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...
- CSS3实战手册(第3版)(影印版)
<CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...
- CSS3实战开发 表单发光特效实战开发
首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...
- CSS3实战开发:使用CSS3实现photoshop的过滤效果
原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...
- CSS3实战开发: 纯CSS实现图片过滤分类显示特效
原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...
- CSS3实战开发: 折角效果实战开发
<!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...
- 【01】《响应式Web设计：HTML5和CSS3实战》
[01] (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页. 2013年1月出版. 读后感:适合入门的书籍,对于响应式布局, ...
- [原创]webapp/css3实战，制作一个《炉石传说》宣传页
在移动网页,尤其是webapp中常需要用到大量的css3动画,来获得良好交互体验 我之前帮朋友做了一个,可惜没帮上忙现在和大家分享一下 目标是要做一个<炉石传说>游戏的介绍宣传页面,文字内 ...
随机推荐
- 团队作业4Alpha冲刺(真.三英战吕布团队)
第一天 2018/6/13 1.1 今日完成任务情况以及遇到的问题. 1.1.1:完成前台部分界面优化,后台进行代码优化 1.1.2团队前台部分js.jquery部分功能实现有难度. 1.2 明天任务 ...
- 『编程题全队』Alpha 阶段冲刺博客Day1
『编程题全队』Alpha 阶段冲刺博客Day1 一.Alpha 阶段全组总任务 二.各个成员在 Alpha 阶段认领的任务 三.明日各个成员的任务安排 孙志威:实现基本的网络连接, 完成燃尽图模块 孙 ...
- 词频统计（WEB）版
需求: 在以前的基础上把程序迁移到web平台,通过用户上传TXT的方式接收文件. 前端页面代码: <%@ Page Language="C#" AutoEventWireup ...
- [转帖]Kerberos简介
1. Kerberos简介 https://www.cnblogs.com/wukenaihe/p/3732141.html 1.1. 功能 一个安全认证协议 用tickets验证 避免本地保存密码 ...
- 2013南京网赛1003 hdu 4750 Count The Pairs
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4750 题意:给出一个无向图,f(a,b)表示从点a到点b的所有路径中的每条路径的最长边中的最小值,给出 ...
- VIM 命令收藏
1.vim#在命令行中输入vim,进入vim编辑器2.i#按一下i键,下端显示 --INSERT--#插入命令,在vim中可能任意字符都有作用3.Esc#退出i(插入)命令进行其它命令使用4.:r f ...
- ROC曲线和PR曲线绘制【转】
TPR=TP/P :真正率:判断对的正样本占所有正样本的比例. Precision=TP/(TP+FP) :判断对的正样本占判断出来的所有正样本的比例 FPR=FP/N :负正率:判断错的负样本占所 ...
- python中OS模块操作文件和目录
在python中执行和操作目录和文件的操作是通过内置的python OS模块封装的函数实现的. 首先导入模块,并查看操作系统的类型: >>> import os os.name # ...
- 51nod 1208 窗上的星星 | 线段树 扫描线
51nod 1208 Stars In Your Window 题面 整点上有N颗星星,每颗星星有一个亮度.用一个平行于x轴和y轴,宽为W高为H的方框去套星星.套住的所有星星的亮度之和为S(包括边框上 ...
- USACO Section 1.5 Prime Palindromes 解题报告
题目 题目描述 题目就是给定一个区间[a,b]((5 <= a < b <= 100,000,000)),我们需要找到这个区间内所有既是回文串又是素数的数字. 输入样例 5 500 ...