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

     上面的方块是使用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;*/