CSS column-width用法及代碼示例

CSS中的columns-width屬性用於定義列的寬度。需要最少的列數才能顯示元素中的內容。這是一種靈活的屬性。如果瀏覽器不能滿足給定的column-width至少two-columns的要求，則這兩列將放在同一列中。

用法:

column-width:auto|length|initial|inherit;

屬性值：

auto:它是默認值。瀏覽器確定列的寬度。

用法:

column-width:auto;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS column-width Property 
        </title>  
          
        <style>  
            .gfg {  
                  
                /* For Chrome, Safari, Opera browsers */ 
                -webkit-column-width:auto; 
                  
                /* For Firefox browser */  
                -moz-column-width:auto;  
                  
                column-width:auto; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h2 >  
            The column-width Property  
        </h2>  
          
        <div class = "gfg">  
            The course is designed for students as well  
            as working professionals to prepare for  
            coding interviews. This course is going  
            to have coding questions from school level  
            to the level needed for product based  
            companies like Amazom, Microsoft, Adobe, etc.  
        </div>  
    </body>  
</html>

輸出：

length:它用於根據長度指定列的寬度。長度可以設置為px，cm等形式。

用法:

column-width:length;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS column-width Property 
        </title>  
          
        <style>  
            .gfg {  
                  
                /* For Chrome, Safari, Opera browsers */ 
                -webkit-column-width:100px; 
                  
                /* For Firefox browser */  
                -moz-column-width:100px;  
                  
                column-width:100px; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h2 >  
            The column-width Property  
        </h2>  
          
        <div class = "gfg">  
            The course is designed for students as well  
            as working professionals to prepare for  
            coding interviews. This course is going  
            to have coding questions from school level  
            to the level needed for product based  
            companies like Amazom, Microsoft, Adobe, etc.  
        </div>  
    </body>  
</html>

輸出：

initial:它用於將column-width屬性設置為其默認值。

用法:

column-width:initial;

例：

<!DOCTYPE html>  
<html>  
    <head>  
        <title> 
            CSS column-width Property 
        </title>  
          
        <style>  
            .gfg {  
                  
                /* For Chrome, Safari, Opera browsers */ 
                -webkit-column-width:initial; 
                  
                /* For Firefox browser */  
                -moz-column-width:initial;  
                  
                column-width:initial; 
            }  
        </style>  
    </head>  
      
    <body>  
        <h2 >  
            The column-width Property  
        </h2>  
          
        <div class = "gfg">  
            The course is designed for students as well  
            as working professionals to prepare for  
            coding interviews. This course is going  
            to have coding questions from school level  
            to the level needed for product based  
            companies like Amazom, Microsoft, Adobe, etc.  
        </div>  
    </body>  
</html>

輸出：

inherit:它用於從其父級設置column-width屬性。

支持的瀏覽器：下麵列出了column-width屬性支持的瀏覽器：

Google Chrome 50.0、4.0-webkit
Internet Explorer 10.0
Firefox 52.0、2.0-moz-
Opera 37.0、15.0-webkit-，11.1
Safari 9.0、3.1-webkit

相關用法

注：本文由純淨天空篩選整理自ManasChhabra2大神的英文原創作品 CSS | column-width Property。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。