CSS - column-fill 属性

CSS column-fill 属性负责平衡元素在分割成多列时内容的分布。

语法

column-fill: auto | balance | initial | inherit;

属性值

值	描述
auto	这将导致列的顺序填充。内容只占用所需的空间。这可能导致某些列保持为空。
balance	它均匀地将内容分布到各列，确保每列尽可能填充相同的内容，从而创建更平衡的布局。
initial	它将属性设置为其默认值。
inherit	它从父元素继承属性。

CSS Column Fill 属性示例

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

使用 Auto 值的 Column Fill 属性

为了让内容自然地流入列中，而无需强制均匀分布，如果在填充所有列之前内容已用尽，则列中的剩余空间将留空，我们使用auto 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         column-count: 3;
         height: 200px;
      }

      .column-auto {
         column-fill: auto;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-fill Property
   </h2>
   <p><strong>
      column-fill: auto
   </strong>
   </p>
   <div class="column-auto">
      TutorialsPoint is an online educational platform
      offering extensive tutorials and resources across
      diverse subjects such as programming, 
      web development, and technology. It provides 
      structured, easy-to-follow content and practical
      examples for learners of all levels. With 
      interactive coding exercises and comprehensive
      guides, TutorialsPoint aims to facilitate 
      effective self-paced learning and 
      skill development.
   </div>
</body>

</html>

使用 Balance 值的 Column Fill 属性

为了让内容分布在定义的列数中，使得每列包含相同数量的内容，我们使用balance 值。这在以下示例中显示。

示例

<!DOCTYPE html>
<html>

<head>
   <style>
      div {
         column-count: 3;
         height: 200px;
      }

      .column-auto {
         column-fill: balance;
      }
   </style>
</head>

<body>
   <h2>
      CSS column-fill Property
   </h2>
   <p><strong>
      column-fill: balance
   </strong>
   </p>
   <div class="column-auto">
      TutorialsPoint is an online educational platform
      offering extensive tutorials and resources across
      diverse subjects such as programming, 
      web development, and technology. It provides 
      structured, easy-to-follow content and 
      practical examples for learners of all levels. 
      With interactive coding exercises and 
      comprehensive guides, TutorialsPoint aims to 
      facilitate effective self-paced learning and 
      skill development.
   </div>
</body>

</html>

支持的浏览器

属性
column-fill	50.0	10.0	52.0	10.0	37.0

css_properties_reference.htm

打印页面