CSS - column-width 属性

CSS column-width 属性设置多列布局中列的宽度。这使得容器拥有尽可能多的列以适应空间，并且每列都保持指定的 column-width 值。如果容器的宽度小于指定的 column-width 值，则列的宽度将小于指定的值。

语法

column-width: auto | length | initial | inherit;

属性值

值	描述
auto	列宽由浏览器决定。默认值。
长度值	列宽以长度值指定。可以使用不同的格式（例如 px、em、ch 等）。列数将是最小能显示元素中所有内容的列数。
initial	这将属性设置为其默认值。
inherit	这将从父元素继承属性。

CSS 列宽属性示例

以下示例解释了使用不同值的 column-width 属性。

使用 auto 值的列宽属性

为了让浏览器决定列宽，我们使用 auto 值。浏览器根据内容和布局确定宽度。如下例所示。

示例

<!DOCTYPE html>
<html>

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

<body>
   <h2>
      CSS column-width property
   </h2>
   <p>
   <strong>
      column-width: auto
   </strong>
   </p>
   <div>
      <p class="col-count-width">
         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>

使用长度值的列宽属性

要手动设置列宽，我们可以使用长度值（例如，10px、10ch）。列的宽度至少与指定宽度一样宽，但如果需要以适应内容，则可能会扩展。适合指定宽度的列数取决于布局和内容大小。如下例所示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      .col-width1 {
         column-width: 100px;
      }
      .col-width2 {
         column-width: 70px;
      }
      .col-width3 {
         column-width: 20ch;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-width property
   </h2>
   <p>
   <strong>
      column-width: 100px
   </strong>
   </p>
   <div>
      <p class="col-width1">
         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>
   <p>
   <strong>
      column-width: 70px
   </strong>
   </p>
   <div>
      <p class="col-width2">
         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>
   <p>
   <strong>
      column-width: 20ch
   </strong>
   </p>
   <div>
      <p class="col-width3">
         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>

支持的浏览器

属性
column-width	50.0	10.0	52.0	9.0	37.0

css_properties_reference.htm

打印页面