CSS 列属性-之路教程

语法

columns: auto | column-width column-count | initial | inherit;

列属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        -webkit-columns: 100px 3;
        /* Chrome, Safari, Opera */
        -moz-columns: 100px 3;
        /* Firefox */
        columns: 100px 3;
      }
    </style>
  </head>
  <body>
    <h2>Columns 属性示例</h2>
    <div class="example">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。

    </div>
  </body>
</html>

在下一个示例中，每列的最小宽度设置为 50px，最大列数设置为 5：

具有指定宽度和列数的 columns 属性示例：

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .example {
        -webkit-columns: 50px 5;
        /* Chrome, Safari, Opera */
        -moz-columns: 50px 5;
        /* Firefox */
        columns: 50px 5;
      }
    </style>
  </head>
  <body>
    <h2>Columns 属性示例</h2>
    <div class="example">
      今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。
生活终归还得继续。
把痛苦停在昨天 把微笑留给明天。
你要多学点东西，你要多看会书，你要多运行些步，时间慢慢流，你想有一个更好的未来，那么从现在开始，你要，好好努力。

    </div>
  </body>
</html>

CSS columns 属性值说明

值	说明
auto	列宽和列计数属性设置为自动。这是默认值。
column-width	设置列的最小宽度。
column-count	设置最大列数。
initial	将属性设置为其默认值。
inherit	从父元素继承属性。

CSS 列属性

CSS columns 属性是以下属性的简写：

column-count，它定义了最大列数。
column-width，定义列的最小宽度。

这两个属性共同创建了多列布局，该布局将自动分解为窄浏览器宽度的单列，无需媒体查询或者其他规则。

columns 属性是 CSS3 属性之一。

设置 column-count 和 column-width 并不总是有意义，因为它会限制布局的灵活性和响应性。

如果列的宽度和列数不适合元素的宽度，浏览器将自动减少列数以适合指定的列宽。

初始值	auto
应用于	除表外的块容器。
继承	无效
可动画的	列的宽度和计数可以设置动画。
版本	CSS3
DOM 语法	object.style.columns=“100px 2”；

日期：2020-06-02 22:14:23 来源：oir作者：oir

←CSS column-width 属性

CSS content属性→

语法

列属性示例：

具有指定宽度和列数的 columns 属性示例：

CSS columns 属性值说明

目录