CSS - column-count 属性

CSS column-count 属性负责将元素的内容分成指定数量的列。

语法

column-count: auto | number | initial | inherit;

属性值

值	描述
auto	元素要分成多少列由其他 CSS 属性（如列宽）决定。默认值。
数字	指定元素内容将要分成的列数。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS 列计数属性示例

以下示例说明了使用不同值的 column-count 属性。

使用 auto 值的列计数属性

为了让列数根据内容和容器大小自动调整，以便布局看起来平衡且适合可用空间，我们使用 auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .col-count-width {
         column-count: auto;
         column-width: 250px;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-count property
   </h2>
   <p>
   <strong>
      column-count: auto value
   </strong>
   </p>
   <div>
      <p class="col-count-width">
         TutorialsPoint is a comprehensive online learning
         platform offering a wide range of tutorials and
         resources across various subjects such as programming,
         web development, and technology. It provides 
         high-quality, accessible educational materials 
         designed for learners of all levels, featuring
         tutorials, coding exercises,and practical examples
         to facilitate self-paced learning and 
         skill development.
      </p>
   </div>
</body>

</html>

使用数字值的列计数属性

为了让内容根据我们的选择显示在不同数量的列中，我们指定所需的列数（例如 3、4、5 等）。根据指定的数字，内容将显示为这么多列。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-count {
         column-count: 4;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-count property
   </h2>
   <p>
   <strong>
      column-count: 4 (content displayed in 4 columns)
   </strong>
   </p>
   <div>
      <p class="multicol-col-count">
         TutorialsPoint is a comprehensive online learning
         platform offering a wide range of tutorials and 
         resources across various subjects such as programming,
         web development, and technology. It provides 
         high-quality,accessible educational materials 
         designed for learners of all levels, featuring 
         tutorials, coding exercises, and practical examples
         to facilitate self-paced learning and 
         skill development.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
column-count	50.0	10.0	52.0	9.0	37.0

css_properties_reference.htm

打印页面