CSS2中如果要设计多列布局，常用的方法有浮动和定位，但是浮动容易错位，定位无法满足模块的自适应能力，以及模块之间的文档流联动的需要。为了解决多列布局的难题，CSS3新增了多列自动布局功能。

利用多列布局属性可以自动将内容按指定的列数排列，这种特性特别适合报纸和杂志类网页布局。

1.columns

可以取的值有

  1. .test{columns:<column-width> || <column-count>}

比如

  1. .test{columns:250px 3;}

意思为，250px一列，总共三列。

放一篇文章上来试试

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.         <style type="text/css" media="screen">
  6.             body {
  7.                 -webkit-columns: 250px 3;
  8.                 columns: 250px 3;
  9.             }
  10.             h1 {
  11.                 color:#333333;
  12.                 background:#DCDCDC;
  13.                 padding:5px 8px;
  14.                 font-size:20px;
  15.                 text-align:center;
  16.                 padding:12px;
  17.             }
  18.             h2 {
  19.                 font-size:16px;
  20.                 text-align:center;
  21.             }
  22.             p {
  23.                 color:#333333;
  24.                 font-size:14px;
  25.                 line-height:180%;
  26.                 text-indent:2em;
  27.             }
  28.         </style>
  29.         <title>columns</title>
  30.     </head>
  31.     <body>
  32.         <h1>故都的秋（选段）</h1>
  33.         <h2>郁达夫</h2>
  34.         <p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别    地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p>
  35.         <p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p>
  36.         <p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p>
  37.         <p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p>
  38.         <p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p>
  39.         <p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p>
  40.     </body>
  41. </html>

效果是这样的

2.column-gap

可以控制两列之间的间距

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.         <style type="text/css" media="screen">
  6.             body {
  7.                 -webkit-column-count:3;
  8.                 -moz-column-count:3;
  9.                 column-count:3;
  10.                 -webkit-column-gap:3em;
  11.                 -moz-column-gap:3em;
  12.                 column-gap:3em;
  13.                 line-height:2.5em;
  14.             }
  15.             h1 {
  16.                 color:#333333;
  17.                 background:#DCDCDC;
  18.                 padding:5px 8px;
  19.                 font-size:20px;
  20.                 text-align:center;
  21.                 padding:12px;
  22.             }
  23.             h2 {
  24.                 font-size:16px;
  25.                 text-align:center;
  26.             }
  27.             p {
  28.                 color:#333333;
  29.                 font-size:14px;
  30.                 line-height:180%;
  31.                 text-indent:2em;
  32.             }
  33.         </style>
  34.         <title>column-gap</title>
  35.     </head>
  36.     <body>
  37.         <h1>故都的秋（选段）</h1>
  38.         <h2>郁达夫</h2>
  39.         <p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别    地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p>
  40.         <p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p>
  41.         <p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p>
  42.         <p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p>
  43.         <p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p>
  44.         <p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p>
  45.     </body>
  46. </html>

3.column-rule

可以定义每列之间边框的宽度、样式和颜色。

语法如下

  1. .test{
  2.     column-rule:<column-rule-width>;
  3.     column-rule:<column-rule-style>;
  4.     column-rule:<column-rule-color>;
  5.     column-rule:<transparent>;
  6. }

给刚才的文章加上虚线分隔

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
  5.         <style type="text/css" media="screen">
  6.         body {
  7.             -webkit-column-count:3;
  8.             -moz-column-count:3;
  9.             column-count:3;
  10.             -webkit-column-gap:3em;
  11.             -moz-column-gap:3em;
  12.             column-gap:3em;
  13.             line-height:2.5em;
  14.             -webkit-column-rule:dashed 2px gray;
  15.             -moz-column-rule:dashed 2px gray;
  16.             column-rule:dashed 2px gray;    
  17.  
  18.         }
  19.         h1 {
  20.             color:#333333;
  21.             background:#DCDCDC;
  22.             padding:5px 8px;
  23.             font-size:20px;
  24.             text-align:center;
  25.             padding:12px;
  26.         }
  27.         h2 {
  28.             font-size:16px;
  29.             text-align:center;
  30.         }
  31.         p {
  32.             color:#333333;
  33.             font-size:14px;
  34.             line-height:180%;
  35.             text-indent:2em;
  36.         }
  37.         </style>
  38.         <title>column-rule</title>
  39.     </head>
  40.     <body>
  41.         <h1>故都的秋（选段）</h1>
  42.         <h2>郁达夫</h2>
  43.         <p> 秋天，无论在什么地方的秋天，总是好的；可是啊，北国的秋，却特别    地来得清，来得静，来得悲凉。我的不远千里，要从杭州赶上青岛，更要从青岛赶上北平来的理由，也不过想饱尝一尝这"秋"，这故都的秋味。 </p>
  44.         <p>江南，秋当然也是有的；但草木雕得慢，空气来得润，天的颜色显得淡，并且又时常多雨而少风；一个人夹在苏州上海杭州，或厦门香港广州的市民中间，浑沌沌地过去，只能感到一点点清凉，秋的味，秋的色，秋的意境与姿态，总看不饱，尝不透，赏玩不到十足。秋并不是名花，也并不是美酒，那一种半开，半醉的状态，在领略秋的过程上，是不合适的。 </p>
  45.         <p>不逢北国之秋，已将近十余年了。在南方每年到了秋天，总要想起陶然亭的芦花，钓鱼台的柳影，西山的虫唱，玉泉的夜月，潭柘寺的钟声。在北平即使不出门去罢，就是在皇城人海之中，租人家一椽破屋来住着，早晨起来，泡一碗浓茶，向院子一坐，你也能看到很高很高的碧绿的天色，听得到青天下驯鸽的飞声。从槐树叶底，朝东细数着一丝一丝漏下来的日光，或在破壁腰中，静对着像喇叭似的牵牛花（朝荣）的蓝朵，自然而然地也能够感觉到十分的秋意。说到了牵牛花，我以为以蓝色或白色者为佳，紫黑色次之，淡红色最下。最好，还要在牵牛花底，教长着几根疏疏落落的尖细且长的秋草，使作陪衬。 </p>
  46.         <p> 北国的槐树，也是一种能使人联想起秋来的点缀。象花而又不是花的那一种落蕊，早晨起来，会铺得满地。脚踏上去，声音也没有，气味也没有，只能感出一点点极微细极柔软的触觉。扫街的在树影下一阵扫后，灰土上留下来的一条条扫帚的丝纹，看起来既觉得细腻，又觉得清闲，潜意识下并且还觉得有点儿落寞，古人所说的梧桐一叶而天下知秋的遥想，大约也就在这些深沉的地方。 </p>
  47.         <p>秋蝉的衰弱的残声，更是北国的特产；因为北平处处全长着树，屋子又低，所以无论在什么地方，都听得见它的啼唱。在南方是非要上郊外或山上去才听得到的。这秋蝉的嘶叫，在北平和蟋蟀耗子一样，简直像是家家户户都养在家里的家虫。 </p>
  48.         <p> 还有秋雨哩，北方的秋雨，她似乎比南方的下得奇，下得有味，下得更像样。 </p>
  49.     </body>
  50. </html>

效果如下

4.column-span

可以定义跨列显示

column-span只有两种取值，一种是不跨列，取值为1，一种是跨列，取值为all

  1. .test{
  2.     column-span:;
  3.     column-span:all;
  4. }

5.column-fill

定义栏目高度

  1. .test{
  2.     /*随内容变化*/
  3.     column-fill:auto;
  4.     /*根据内容最多列的高度进行统一*/
  5.     column-fill:balance;
  6. }

CSS3实战之多列的更多相关文章

  1. 160427、CSS3实战笔记--多列布局

    通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.—北京机械工业出版社2011.5   多列布局适合纯文字版式设计,如报纸内和杂志类网页布局,不适合做网页结构布 ...

  2. 《css3实战》读书笔记 第一章 基于CSS需求而编写的HTML.

    笔记说明 <CSS3实战手册第3版(影印版)>可以消除Web设计工作的痛苦,并且带给你:HTML--重新入门.如果你是HTML新手,你会学到如何以CSS友好的方式进行基本页面构造.若你是H ...

  3. CSS3实战手册(第3版)(影印版)

    <CSS3实战手册(第3版)(影印版)> 基本信息 原书名:CSS3: The Missing Manual, 3E 作者: David Sawyer McFarland 出版社:东南大学 ...

  4. CSS3实战开发 表单发光特效实战开发

    首先,我们先准备好html代码: <!doctype html> <html> <head> <meta charset="utf-8"& ...

  5. CSS3实战开发:使用CSS3实现photoshop的过滤效果

    原文:CSS3实战开发:使用CSS3实现photoshop的过滤效果 我们知道,使用Photoshop来调整图像的亮度和对比度,或者将图片转化为灰度等等是很常见的功能.今天我将给大家介绍几个新特性,我 ...

  6. CSS3实战开发: 纯CSS实现图片过滤分类显示特效

    原文:CSS3实战开发: 纯CSS实现图片过滤分类显示特效 各位网友大家好,今天我要带领大家开发一个纯CSS的图片分类显示的网址导航,单纯看标题大家可能有些困惑,依照以往惯例,我先给大家演示一下实际运 ...

  7. CSS3实战开发: 折角效果实战开发

    <!DOCTYPE html> <html> <head> <meta charset="utf-9"> <meta name ...

  8. 【01】《响应式Web设计：HTML5和CSS3实战》

    [01]   (魔芋:已看完.) [01]<响应式Web设计:HTML5和CSS3实战>(全).pdf 共246页.   2013年1月出版.   读后感:适合入门的书籍,对于响应式布局, ...

  9. [原创]webapp/css3实战，制作一个《炉石传说》宣传页

    在移动网页,尤其是webapp中常需要用到大量的css3动画,来获得良好交互体验 我之前帮朋友做了一个,可惜没帮上忙现在和大家分享一下 目标是要做一个<炉石传说>游戏的介绍宣传页面,文字内 ...

随机推荐

  1. 团队作业4Alpha冲刺(真.三英战吕布团队)

    第一天 2018/6/13 1.1 今日完成任务情况以及遇到的问题. 1.1.1:完成前台部分界面优化,后台进行代码优化 1.1.2团队前台部分js.jquery部分功能实现有难度. 1.2 明天任务 ...

  2. C++获取private的变量-偷走private

    private提供了对数据的封装,使得private成员只能被类自身的成员函数以及类的友元访问,其他的函数或者类想要访问private成员只能通过该类所提供的set和get的方法进行访问, 或者返回其 ...

  3. 用css 修改 谷歌浏览器自带的 滚动条样式

    ::-webkit-scrollbar { width: 0.5rem;}/* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: ins ...

  4. Beta阶段团队项目开发篇章2

    例会时间: 2016.12.4 例会照片 个人工作 上阶段任务验收: 组员任务都已完成. 任务分配 组员 任务内容 韩慧敏 对调查问卷的结果进行分析和总结,确定Beta阶段各任务的优先级,撰写相关博客 ...

  5. 1105 C程序的推导过程

  6. windows版本 rac 报错信息

    原因 - 安装程序无法在一个或多个节点上执行指定的脚本.这可能是由于在节点上执行脚本时出现异常错误. 操作 - 有关详细信息, 请查看日志文件 'C:\Users\ADMINI~1\AppData\L ...

  7. mybaits入门（含实例教程和源码） http://blog.csdn.net/u013142781/article/details/50388204

    前言:mybatis是一个非常优秀的存储过程和高级映射的优秀持久层框架.大大简化了,数据库操作中的常用操作.下面将介绍mybatis的一些概念和在eclipse上的实际项目搭建使用. 一.mybati ...

  8. Dubbo学习(四) dubbo的特点，8种通信协议之对比

    一.dubbo的特性 (1) 连通性: 注册中心负责服务地址的注册与查找,相当于目录服务,服务提供者和消费者只在启动时与注册中心交互,注册中心不转发请求,压力较小 监控中心负责统计各服务调用次数,调用 ...

  9. mysql二进制日志的开启和使用

    二进制日志(BINLOG)记录了所有的ddl和dml语句,但不包括数据查询语句.语句以“事件”的形式保存,描述数据更改过程. 环境:win8   mysql5.6.23 1.mysql开启二进制日志 ...

  10. maven 手动执行下载

    先把命令行切换到Maven项目的根目录,比如:/d/xxxwork/java/maven-test,然后执行命令: mvn clean compile