文档章节

CSS3多列column布局

lotozhou
 lotozhou
发布于 2015/12/02 11:07
字数 1209
阅读 47
收藏 1
Properties属性 CSS Version版本 Inherit From Parent继承性 Description简介
column css3
设置或检索对象的列数和每列的宽度。复合属性
column-width
css3 设置或检索对象每列的宽度
column-count css3 设置或检索对象的列数
column-gap css3 设置或检索对象的列与列之间的间隙
column-rule css3 设置或检索对象的列与列之间的边框。复合属性
column-rule-width css3 设置或检索对象的列与列之间的边框厚度。
column-rule-style css3 设置或检索对象的列与列之间的边框样式。
column-rule-color css3 设置或检索对象的列与列之间的边框颜色。
column-span css3 设置或检索对象元素是否横跨所有列。
column-fill css3 设置或检索对象所有列的高度是否统一。
column-break-before css3 设置或检索对象之前是否断行。
column-break-after css3 设置或检索对象之前是否断行。
column-break-inside css3 设置或检索对象内部是否断行。

columns

设置或检索对象的列数和每列的宽度。复合属性

    columns:[ column-width ] || [ column-count ]

.test{
width:628px;
border:10px solid #000;
-moz-columns:200px 3;
-webkit-columns:200px 3;
columns:200px 3;
}
.test2{
border:10px solid #000;
-moz-columns:200px;
-webkit-columns:200px;
columns:200px;
}

column-width

 设置或检索对象每列的宽度

.test{
width:628px;
border:10px solid #000;
-moz-column-width:200px;
-moz-column-count:3;
-webkit-column-width:200px;
-webkit-column-count:3;
column-width:200px;
column-count:3;
}
.test2{
border:10px solid #000;
-moz-column-width:200px;
-webkit-column-width:200px;
column-width:200px;
}
.test3{
border:10px solid #000;
-moz-column-count:5;
-webkit-column-count:5;
column-count:5;
}

column-count

设置或检索对象的列数

    column-count:<integer> | auto

    <integer>:用整数值来定义列数。不允许负值

    auto:根据column-width自定分配宽度

column-gap

设置或检索对象的列与列之间的间隙

column-gap:<length> | normal

    <length>:用长度值来定义列与列之间的间隙。不允许负值

    normal:与font-size大小相同。假设该对象的font-size为16px,则normal值为16px,类推。

column-rule

设置或检索对象的列与列之间的边框。复合属性。

column-rule:[ column-rule-width ] || [ column-rule-style ] || [ column-rule-color ]

    [ column-rule-width ]:设置或检索对象的列与列之间的边框厚度。

    [ column-rule-style ]:设置或检索对象的列与列之间的边框样式。

    [ column-rule-color ]:设置或检索对象的列与列之间的边框颜色。

.test{
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:10px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:10px solid #090;
column-count:3;
column-gap:20px;
column-rule:10px solid #090;
}

设置或检索对象的列与列之间的边框厚度。

column-rule-width:<length> | thin | medium | thick

    <length>:用长度值来定义边框的厚度。不允许负值

    medium:定义默认厚度的边框。

    thin:定义比默认厚度细的边框。

    thick:定义比默认厚度粗的边框。

设置或检索对象的列与列之间的边框样式。

column-rule-style:none | hidden | dotted | dashed | solid | double | groove | ridge | inset | outset

    none:无轮廓。column-rule-color与column-rule-width将被忽略

    hidden:隐藏边框。

    dotted:点状轮廓。

    dashed:虚线轮廓。

    solid:实线轮廓

    double:双线轮廓。两条单线与其间隔的和等于指定的column-rule-width值

    groove:3D凹槽轮廓。

    ridge:3D凸槽轮廓。

    inset:3D凹边轮廓。

    outset:3D凸边轮廓。

column-rule-color:<color>

设置或检索对象元素是否横跨所有列。

column-span:none | all

none:不跨列

all:横跨所有列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:3;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:3;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:3;
column-gap:20px;
column-rule:3px solid #090;
}
.test p{
-moz-column-span:all;
-webkit-column-span:all;
column-span:all;
}

效果:

CSS3多列Multi-column布局

设置或检索对象所有列的高度是否统一。

column-fill:auto | balance

    auto:列高度自适应内容

    balance:所有列的高度以其中最高的一列统一

.test{
width:600px;
border:10px solid #000;
-moz-column-count:2;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-moz-column-fill:balance;
-webkit-column-count:2;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
-webkit-column-fill:balance;
column-count:2;
column-gap:20px;
column-rule:3px solid #090;
column-fill:balance;
}

效果图:

CSS3多列Multi-column布局

设置或检索对象之前是否断行。

column-break-before:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

    auto:既不强迫也不禁止在元素之前断行并产生新列

    always:总是在元素之前断行并产生新列

    avoid:避免在元素之前断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-before:always;
-webkit-column-break-before:always;
column-break-before:always;
}

效果图:

CSS3多列Multi-column布局

设置或检索对象之后是否断行。

column-break-after:auto | always | avoid | left | right | page | column | avoid-page | avoid-column

    auto:既不强迫也不禁止在元素之后断行并产生新列

    always:总是在元素之后断行并产生新列

    avoid:避免在元素之后断行并产生新列

.test{
width:600px;
border:10px solid #000;
-moz-column-count:4;
-moz-column-gap:20px;
-moz-column-rule:3px solid #090;
-webkit-column-count:4;
-webkit-column-gap:20px;
-webkit-column-rule:3px solid #090;
column-count:4;
column-gap:20px;
column-rule:3px solid #090;
}
.test div{
-moz-column-break-after:always;
-webkit-column-break-after:always;
column-break-after:always;
}

效果图:

CSS3多列Multi-column布局

设置或检索对象内部是否断行。

column-break-inside:auto | avoid | avoid-page | avoid-column

    auto:既不强迫也不禁止在元素内部断行并产生新列

    avoid:避免在元素内部断行并产生新列

© 著作权归作者所有

共有 人打赏支持
lotozhou
粉丝 9
博文 51
码字总数 51524
作品 0
苏州
程序员
私信 提问
网页瀑布流效果实现的几种方式

前言 like a mountain that is in our path,wo cannot complain that it is there,we simply have to climb it 起由 最近,在搭建个人博客时,其中的Demo展示页面想用瀑布流形式展现,发现现有...

撒网要见鱼
2016/11/13
0
0
瀑布流布局网页的浅析

简介 如果你经常网上冲浪,这样参差不齐的多栏布局,是不是很眼熟啊? 类似的布局,似乎一夜之间出现在国内外大大小小的网站上,比如 Pinterest (貌似是最早使用这种布局的网站了),Mark之,...

小编辑
2011/09/14
3K
6
HTML前端开发之路——多列布局

利用多列布局的属性可以轻松的为文字或者图片添加瀑布流效果; 首先看一下多列布局的属性总览: column-width属性简介 2.column-count属性简介 3.column属性简介 4.column-gap属性简介 5.co...

LeslieMay
2016/02/12
88
0
css3学习笔记

对CSS3已完全向后兼容,所以你就不必改变现有的设计。浏览器将永远支持CSS2。 CSS3 模块 CSS3被拆分为"模块"。旧规范已拆分成小块,还增加了新的。 一些最重要CSS3模块如下: 选择器 盒模型 ...

effto
2016/08/15
18
0
CSS并不简单:多栏布局(Multi-Columns Layout)

多栏布局是CSS3新增布局中的一种,尽管它很低调。 一、明确结构   多栏布局的结构很简单,主要由multi-column container和column box组成。   当一个元素设置了column-width和column-co...

descire
09/20
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Go 使用channel控制并发

前言 channel一般用于协程之间的通信,channel也可以用于并发控制。比如主协程启动N个子协程,主协程等待所有子协程退出后再继续后续流程,这种场景下channel也可轻易实现。 场景示例 总结 ...

恋恋美食
24分钟前
1
0
Apache Flink 漫谈系列 - 持续查询(Continuous Queries)

摘要: 实际问题 我们知道在流计算场景中,数据是源源不断的流入的,数据流永远不会结束,那么计算就永远不会结束,如果计算永远不会结束的话,那么计算结果何时输出呢?本篇将介绍Apache Fl...

阿里云官方博客
28分钟前
4
0
斐波那契堆的理解,节点mark属性和势函数

斐波那契堆 看了好多博客,都是照搬算法导论的内容,没有自己的理解,比如为什么有mark属性,势函数的作用,以及为什么叫斐波那契堆,下面说说鄙人的理解。 势函数 势函数是根节点个数加上2...

杨喆
29分钟前
3
0
NIO源码详解

阻塞io和无阻塞io: 阻塞io是指jdk1.4之前版本面向流的io,服务端需要对每个请求建立一堆线程等待请求,而客户端发送请求后,先咨询服务端是否有线程相应,如果没有则会一直等待或者遭到拒 ...

沉稳2018
33分钟前
0
0
如何把已经提交的commit, 从一个分支放到另一个分支

在本地master提交了一个commit(8d85d4bca680a5dbcc3e5cfb3096d18cd510cc9f),如何提交的test_2分之上? git checkout test_2git cherry-pick 8d85d4bca680a5dbcc3e5cfb3096d18cd510cc9f......

stephen_wu
37分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部