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。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。