CC3的多列属性Multi-column
CC3的多列属性Multi-column
一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便.
0
16-09-17 1
16-09-17 2
16-09-17 3
16-09-17 4
16-09-17 5
16-09-17 6
16-09-17 7
16-09-17 8
16-09-17 9
16-09-17 10
16-09-17 11
16-09-17 12
16-09-17 13
16-09-17 14
16-09-17 15
16-09-17 16
16-09-17 17
16-09-17 18
16-09-17 19
16-09-17 20
16-09-17 21
16-09-17 22
16-09-17 23
16-09-17 24
16-09-17 25
16-09-17 26
16-09-17
16-09-17 1
16-09-17 2
16-09-17 3
16-09-17 4
16-09-17 5
16-09-17 6
16-09-17 7
16-09-17 8
16-09-17 9
16-09-17 10
16-09-17 11
16-09-17 12
16-09-17 13
16-09-17 14
16-09-17 15
16-09-17 16
16-09-17 17
16-09-17 18
16-09-17 19
16-09-17 20
16-09-17 21
16-09-17 22
16-09-17 23
16-09-17 24
16-09-17 25
16-09-17 26
16-09-17
上面的方块是使用H5的多列属性弄的,搞了好久.有一些误区总如下.
1.使用多列属性时候,内容最好是内联元素,不能搞块级的.不然的话分列不达预期.
2.感觉分列时,每一列等于总宽度除以指定的列数
3.分列时,它是从上到下从左到右的顺序.例如一个DIV里有7个内联小块,指定分3列那么是这样
1 4 7 1 2 3
2 5 (而不是这样->) 4 5 6
3 6 7
4.主要属性说明:
// columns表示分几列,每个多宽.当前是分4列,宽度自动(auto可不写)
columns: 4 auto;
-moz-columns: 4 auto; /* Firefox */
-webkit-columns: 4 auto; /* Safari 和 Chrome */
// 这是一系列属性简写 ,当前指定了列之间的分界线 10像素,实线,黑色.这个线看起来是10像素,但是它不占用列的空间.好像是"浮在列之间的"
column-rule: 10px solid #000000;
-moz-column-rule: 10px solid #000000; /* Firefox */
-webkit-column-rule: 10px solid #000000; /* Safari and Chrome */
// 这是指定列之间的距离 和列间分界线不同,这个距离是要占空间的,如果指定了,将会挤占列宽,使列宽度"缩小".
/*-moz-column-gap: 5px; Firefox */
/*-webkit-column-gap: 5px; Safari 和 Chrome */
/*column-gap: 5px;*/
