CSS - columns 属性

CSS columns 属性是用于定义属性 column-width 和 column-count 值的简写属性，其中 column-width 设置每列的最小宽度，column-count 设置最大列数。

语法

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

属性值

值	描述
auto	将 column-width 和 column-count 都设置为 auto。默认值。
column-width	定义每列的最小宽度。
column-count	定义最大列数。
initial	将属性设置为其默认值。
inherit	从父元素继承该属性。

CSS columns 属性示例

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

使用 auto 值的 columns 属性

为了让浏览器根据内容和可用空间决定列宽，使其根据内容在可用空间中尽可能多地容纳列数，我们使用 auto 值。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .multicol-col-rule {
         columns: auto;
      }
      p{
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS columns property
   </h2>
   <h4>
      columns: auto
   </h4>
   <div class="multicol-col-rule">
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials, guides, and resources
         on a wide range of subjects, including programming,
         web development, data science, and more. It provides
         free and paid courses, covering basics to advanced
         topics, with interactive examples and practical 
         exercises. The platform caters to learners of all 
         levels, from beginners to professionals, helping 
         them build skills through structured content and 
         hands-on practice. TutorialsPoint also features 
         coding playgrounds and forums for community support.
      </p>
   </div>
</body>

</html>

使用宽度和列数值的 columns 属性

要手动设置列宽和列数，我们可以在单个声明中在 columns 属性中指定 column-width 和 column-count。根据指定的宽度，列将适应可用空间，最多达到 column-count 指定的最大数量。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .cols1 {
         columns: 50px 5;
      }
      .cols2 {
         columns: 100px 6;
      }
      p{
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS columns property
   </h2>
   <h4>
      columns: 50px 5
   </h4>
   <div class="cols1">
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials, guides, and resources
         on a wide range of subjects, including programming,
         web development, data science, and more. It provides
         free and paid courses, covering basics to advanced
         topics, with interactive examples and practical 
         exercises. The platform caters to learners of all 
         levels, from beginners to professionals, helping 
         them build skills through structured content and 
         hands-on practice. TutorialsPoint also features 
         coding playgrounds and forums for community support.
      </p>
   </div>
   <h4>
      columns: 100px 6 (see in this case although 6 
      columns are needed only 4 are shown due to the content
      and available space.)
   </h4>
   <div class="cols2">
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials, guides, and resources
         on a wide range of subjects, including programming,
         web development, data science, and more. It provides
         free and paid courses, covering basics to advanced
         topics, with interactive examples and practical 
         exercises. The platform caters to learners of all 
         levels, from beginners to professionals, helping 
         them build skills through structured content and 
         hands-on practice. TutorialsPoint also features 
         coding playgrounds and forums for community support.
      </p>
   </div>
</body>

</html>

columns 属性的组成属性

columns 包含 column-width 和 column-count 属性。这两个属性可以组合使用以产生 columns 属性的效果。以下示例显示了这一点。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .cols1 {
         column-width: 50px;
         column-count: 5;
      }
      p{
         background-color: lightgreen;
      }
   </style>
</head>

<body>
   <h2>
      CSS columns property
   </h2>
   <h4>
      column-width: 50px; column-count: 5
   </h4>
   <div class="cols1">
      <p>
         TutorialsPoint is a comprehensive online learning 
         platform offering tutorials, guides, and resources
         on a wide range of subjects, including programming,
         web development, data science, and more. It provides
         free and paid courses, covering basics to advanced
         topics, with interactive examples and practical 
         exercises. The platform caters to learners of all 
         levels, from beginners to professionals, helping 
         them build skills through structured content and 
         hands-on practice. TutorialsPoint also features 
         coding playgrounds and forums for community support.
      </p>
   </div>
</body>

</html>

支持的浏览器

属性
columns	50.0	10.0	52.0	9.0	37.0

css_properties_reference.htm

打印页面