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

列印頁面