CC3的多列属性Multi-column

CC3的多列属性Multi-column

一直都很想了解这个属性,总是忘了.今天可以研究一下,回想起想了解它的原因,大概是觉得它很容易分开几列.可能会有很多好处和方便.

<!--
#css3column {
columns: 4 auto;
-moz-columns: 4 auto; /* Firefox */
-webkit-columns: 4 auto; /* Safari 和 Chrome */

-moz-column-rule: 10px solid #000000; /* Firefox */
-webkit-column-rule: 10px solid #000000; /* Safari and Chrome */
column-rule: 10px solid #000000;

text-align: center;
/*-moz-column-gap: 5px; Firefox */
/*-webkit-column-gap: 5px; Safari 和 Chrome */
/*column-gap: 5px;*/
}

#css3column a {
display:inline-block;
height: 72px;
width: 72px;
line-height: 36px;
margin:3px;
background: #0087BD;
color: white;
border: 5px solid transparent;
}

#css3column a:hover {
opacity: .9;
border-color:#f83;
}
-->

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;*/

CC3的多列属性Multi-column的相关教程结束。