CSS3 多列布局屬性

1.column-count

    column-count屬性規(guī)定元素應(yīng)該被劃分的列數(shù)。

2.column-gap

    column-gap屬性規(guī)定列之間的間隔。

    為之前的實例添加此屬性，代碼如下:

    column-gap: 40px;

3.column-rule-style

    column-ru!e-style屬性規(guī)定列之間的樣式規(guī)則，它類似于border-style屬性，其屬性的值可以是以下幾種：

    ?none：定義沒有規(guī)則。

    ?hidden：定義隱藏規(guī)則。

    ?dotted: 定義點狀規(guī)則。

    ?dashed：定義虛線規(guī)則。

    ?solid：定義實線規(guī)則。

    ?double：定義雙線規(guī)則。

    ?groove：定義3D graoved規(guī)則，該效果取決于寬度和顏色值。

    ?ridge：定義3D ridged規(guī)則，該效果取決于寬度和顏色值。

    ?inset：定義3D inset規(guī)則，該效果取決于寬度和顏色值。

    ?outset：定義3D outset規(guī)則，該效果取決于寬度和顏色值。

4.column-rule-width

    column-rule-width屬性規(guī)定列之間的寬度規(guī)則，它類似于border-width屬性，其屬性的值可以使以下幾種：

    ?thin：定義纖細規(guī)則。

    ?medium：定義中等規(guī)則。

    ?thick：定義寬厚規(guī)則。

    ?length：規(guī)定規(guī)則的寬度。

5.column一rulo-color

    column-rule-color屬性規(guī)定列之間的顏色規(guī)則，它類似于border-color屬性。 

    下面利用上述三個屬性添加列與列的分割線，代碼如下：

    column-rule-color: red;

    column-rule-width: 5 px;

    column-rule-style: dotted;

6.column-rule

    column-ruie是一個簡寫屬性，用于設(shè)置所有column-rule-*屬性。column-rule屬性設(shè)置列之間寬度、樣式和顏色規(guī)則，類似于border屬性。

7.column-span

    column-span屬性規(guī)定元素應(yīng)橫跨多少列，其值可以是以下兩種：

    ?1：元素應(yīng)橫跨一列。

    ?all：元素應(yīng)橫跨所有列。

8.column-width

    column-width屬性規(guī)定列的寬度，其屬性的值可以是以下兩種：

    ?auto：由瀏覽器決定列寬。

    ?length：規(guī)定列的寬度。

9.columns

    columns屬性是一個簡寫屬性，用于設(shè)置列寬和列數(shù)，語法如下：

    columns: column-width column-count: