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

列印頁面