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

列印頁面