HTML Style columnFill用法及代码示例

HTML DOM样式columnFill属性指定如何填充列(是否平衡)。句法：

获取columnFill属性
```
object.style.columnFill
```

设置columnFill属性

object.style.columnFill= "balance|initial|auto|inherit"

属性值：

balance:它平衡列(默认)。
auto:列将具有不同的长度并按顺序填充。
initial:将值设置为默认值。
inherit:从父级继承值。

例：

<!DOCTYPE html> 
<html> 
<head> 
    <title> 
      HTML | DOM Style columnFill Property 
    </title> 
</head> 
<body> 
  
    <div id="example"> 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal.  
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
      GEEKSFORGEEKS welcomes you to the learning portal. 
  
    </div> 
    <button onclick="split()">click</button> 
  
    <script> 
        function split() { 
  
            document.getElementById( 
              "example").style.columnFill = "auto"; 
        } 
    </script> 
  
</body> 
  
</html>

注意：“ 13.0 -moz-”中支持CCSS3 column-fill属性。

支持的浏览器：HTML |不支持主要的浏览器。 DOM样式columnFill属性。

相关用法

注：本文由纯净天空筛选整理自AkshayGulati大神的英文原创作品 HTML | DOM Style columnFill Property。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。