文章: 阅读:

CSS Column 多列

CSSCSS

前言

  • CSS3 可以将文本内容设计成像报纸一样的多列布局。
属性 描述 CSS 备注 🔗
columns column-width 与 column-count 的简写属性 3 🔗
column-count 指定元素应该被分割的列数 3 🔗
column-width 指定列的宽度 3 🔗
column-fill 指定如何填充列 3 🔗
column-gap 指定列与列之间的间隙 3 🔗
column-rule 所有 column-rule-* 属性的简写 3 🔗
column-rule-width 指定两列间边框的厚度 3 🔗
column-rule-style 指定两列间边框的样式 3 🔗
column-rule-color 指定两列间边框的颜色 3 🔗
column-span 指定元素要跨越多少列 3 🔗

1、列数

  • column-count 属性指定了需要分割的列数。
属性 描述 CSS 备注 🔗
column-count 指定元素应该被分割的列数 3 🔗
  • 属性值
值 描述
number 列的最佳数目将其中的元素的内容无法流出
auto 默认，列数将取决于其他属性，例如：”column-width”

  • 以下实例将 <div> 元素中的文本分为 3 列。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .newspaper {
            column-count: 3;
            -moz-column-count: 3; /* Firefox */
            -webkit-column-count: 3; /* Safari and Chrome */
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

2、列宽度

  • column-width 属性指定了列的宽度。
属性 描述 CSS 备注 🔗
column-width 指定列的宽度 3 🔗
  • 属性值
值 描述
auto 浏览器将决定列的宽度
length 指定列宽的长度

  • 实例

    1
    2
    3
    4
    5
    6
    7
    <style>
        .newspaper {
            column-width: 100px;
            -moz-column-width: 100px; /* Firefox */
            -webkit-column-width: 100px; /* Safari and Chrome */
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

3、列间隙

  • column-gap 属性指定了列与列间的间隙。
属性 描述 CSS 备注 🔗
column-gap 指定列与列之间的间隙 3 🔗
  • 属性值
值 描述
length 一个指定的长度，将设置列之间的差距
normal 指定一个列之间的普通差距。W3C 建议 1EM 值

  • 以下实例指定了列与列间的间隙为 40 像素。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        .newspaper {
            column-count: 3;
            -moz-column-count: 3; /* Firefox */
            -webkit-column-count: 3; /* Safari and Chrome */

            column-gap: 40px;
            -moz-column-gap: 40px; /* Firefox */
            -webkit-column-gap: 40px; /* Safari and Chrome */
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

4、列边框

  • column-rule 属性指定了列与列间的边框样式。
属性 描述 CSS 备注 🔗
column-rule 所有 column-rule-* 属性的简写 3 🔗
column-rule-width 指定两列间边框的厚度 3 🔗
column-rule-style 指定两列间边框的样式 3 🔗
column-rule-color 指定两列间边框的颜色 3 🔗

4.1 column-rule-width

  • column-rule-width 属性指定了两列的边框厚度。

  • 属性值

值 描述
thin 指定一个细边框的规则
medium 定义一个中等边框规则
thick 指定一个粗边框的规则
length 指定宽度的规则

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        .newspaper {
            column-count: 3;
            column-gap: 40px;
            column-rule-style: outset;
            column-rule-width: 5px;

            /* Chrome, Safari, Opera */
            -webkit-column-count: 3;
            -webkit-column-gap: 40px;
            -webkit-column-rule-style: outset;
            -webkit-column-rule-width: 5px;

            /* Firefox */
            -moz-column-count: 3;
            -moz-column-gap: 40px;
            -moz-column-rule-style: outset;
            -moz-column-rule-width: 5px;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

4.2 column-rule-style

  • column-rule-style 属性指定了列与列间的边框样式。

  • 属性值

值 描述
none 定义没有规则
hidden 定义隐藏规则
dotted 定义点状规则
dashed 定义虚线规则
solid 定义实线规则
double 定义双线规则
groove 定义 3D grooved 规则。该效果取决于宽度和颜色值
ridge 定义 3D ridged 规则。该效果取决于宽度和颜色值
inset 定义 3D inset 规则。该效果取决于宽度和颜色值
outset 定义 3D outset 规则。该效果取决于宽度和颜色值

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    <style>
        .newspaper {
            column-count: 3;
            column-gap: 40px;
            column-rule-style: dotted;

            /* Firefox */
            -moz-column-count: 3;
            -moz-column-gap: 40px;
            -moz-column-rule-style: dotted;

            /* Safari and Chrome */
            -webkit-column-count: 3;
            -webkit-column-gap: 40px;
            -webkit-column-rule-style: dotted;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

4.3 column-rule-color

  • column-rule-color 属性指定了两列的边框颜色。

  • 属性值

值 描述
color 指定颜色的规则

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <style>
        .newspaper {
            column-count: 3;
            column-gap: 40px;
            column-rule-style: outset;
            column-rule-color: #ff0000;

            /* Firefox */
            -moz-column-count: 3;
            -moz-column-gap: 40px;
            -moz-column-rule-style: outset;
            -moz-column-rule-color: #ff0000;

            /* Safari and Chrome */
            -webkit-column-count: 3;
            -webkit-column-gap: 40px;
            -webkit-column-rule-style: outset;
            -webkit-column-rule-color: #ff0000;
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

4.4 简写

  • column-rule 属性是 column-rule-* 所有属性的简写。

  • 属性值

值 描述
column-rule-width 设置列中之间的宽度规则
column-rule-style 设置列中之间的样式规则
column-rule-color 设置列中之间的颜色规则

  • 以下实例设置了列直接的边框的厚度，样式及颜色。

  • 实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <style>
        .newspaper {
            column-count: 3;
            -moz-column-count: 3; /* Firefox */
            -webkit-column-count: 3; /* Safari and Chrome */

            column-gap: 40px;
            -moz-column-gap: 40px; /* Firefox */
            -webkit-column-gap: 40px; /* Safari and Chrome */

            column-rule: 4px outset #ff00ff;
            -moz-column-rule: 4px outset #ff00ff; /* Firefox */
            -webkit-column-rule: 4px outset #ff00ff; /* Safari and Chrome */
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

5、跨列

  • column-span 属性指定元素要跨越多少列。
属性 描述 CSS 备注 🔗
column-span 指定元素要跨越多少列 3 🔗
  • 属性值
值 描述
1 元素应跨越一列
all 该元素应该跨越所有列

  • 以下实例指定 <h2> 元素跨越所有列。

  • 简写实例

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <style>
        .newspaper {
            column-count: 4;
            -moz-column-count: 4; /* Firefox */
            -webkit-column-count: 4; /* Safari and Chrome */
        }
        h2 {
            column-span: all;
            -webkit-column-span: all; /* Safari and Chrome */
        }
    </style>
    1
    2
    3
    4
    5
    6
    <div class="newspaper">
        “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；
        当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，
        行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做
        一些事情；然后，谁知道呢？我甚至可能改变这个世界。”
    </div>

  • 效果



    英国维斯米斯特教堂碑文


    “当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢？我甚至可能改变这个世界。”

6、浏览器支持

属性
column-count 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-gap 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit-
11.1
column-rule-color 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-style 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-rule-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
column-width 4.0 -webkit- 10.0 2.0 -moz- 3.1 -webkit- 15.0 -webkit
11.1
  • 表格中的数字表示支持该属性的第一个浏览器版本号。
  • 紧跟在 -webkit-, -ms-, -o- 或 -moz- 前的数字为支持该前缀属性的第一个浏览器版本号。

如果您觉得阅读本文对您有帮助，请用微信、支付宝 or QQ 扫码赞助，您的支持是我写作最大的动力！欢迎各位转载，但是未经作者本人同意，转载文章之后必须在文章页面明显位置给出作者和原文链接，否则保留追究法律责任的权利。

Qian Chia

Posted @ 2019-11-05 20:17


评论


文章目录
  1. 1. 前言
  2. 2. 1、列数
  3. 3. 2、列宽度
  4. 4. 3、列间隙
  5. 5. 4、列边框
    1. 5.1. 4.1 column-rule-width
    2. 5.2. 4.2 column-rule-style
    3. 5.3. 4.3 column-rule-color
    4. 5.4. 4.4 简写
  6. 6. 5、跨列
  7. 7. 6、浏览器支持
隐藏目录