当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


CSS column-span用法及代码示例


CSS的column-span属性设置元素可以跨越的列数。其值可以为none |全部|首字母|继承

用法:

column-span:none|all|initial|inherit;

属性值:


  • all:它允许相等地跨所有列。

    用法:

     column-span:all;

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | column-span Property 
        </title> 
        <style> 
            .paragraph { 
                column-count:3; 
            } 
              
            h2 { 
                column-span:all; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class="paragraph "> 
            <h2> Here we used col-span:all;  
              It had done span across three coloumns 
            </h2> 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      </div> 
    </body> 
    </html>

    输出:

  • none:该值将杀死spanning元素并将其设置为none。

    用法:

     column-span:none;

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | column-span Property 
        </title> 
        <style> 
            .paragraph { 
                column-count:3; 
            } 
              
            h2 { 
                column-span:none; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class="paragraph "> 
            <h2> Here we used col-span:none; 
              It had done span across three coloumns 
            </h2> 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      </div> 
    </body> 
    </html>

    输出:

  • initial:此值使此属性设置为其默认值。

    用法:

     column-span:initial;

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | column-span Property 
        </title> 
        <style> 
            .paragraph { 
                column-count:3; 
            } 
              
            h2 { 
                column-span:initial; 
            } 
        </style> 
    </head> 
      
        <div class="paragraph "> 
            <h2> Here we used col-span:initial; 
              It had done span across three coloumns 
            </h2> 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
      </div> 
    </body> 
    </html>

    输出:

  • inherit:关联元素采用其父元素指定的column-span属性的评估值,即它将采用父元素的继承属性。 CSS的column-span属性不支持此函数。

    用法:

     column-span:inherit;

    例:

    <!DOCTYPE html> 
    <html> 
      
    <head> 
        <title> 
            CSS | column-span Property 
        </title> 
        <style> 
            .paragraph { 
                column-count:3; 
            } 
              
            h2 { 
                column-span:all; 
            } 
        </style> 
    </head> 
      
    <body> 
        <div class="paragraph "> 
            <h1>Here colspan:all; 
              Inheritance is done in next paragraph  
            </h1>  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
        </div> 
        <br> 
        <br> 
      
        <div class="paragraph "> 
            <h2>Here  we used colspan:inherit.;</h2>  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks  
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
          GeeksforGeeks GeeksforGeeks GeeksforGeeks 
        </div> 
      
    </body> 
      
    </html>

    输出:

    支持的浏览器:CSS |下面列出了column-span属性:

    • Goolge Cgrome 50.0、4.0 -webkit-
    • Internet Explorer 10.0
    • Opera 37.0,15.0 -webkit-
    • Safari 9.0、3.1 -webkit-


相关用法


注:本文由纯净天空筛选整理自MeghaKakkar大神的英文原创作品 CSS | column-span Property。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。