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。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。