CSS3 multi-Column Layout--columns

CSS3 multi-Column Layout--columns

Grammar:

columns:<column-width> | | <column-count>

Multi-Column Layout columns property parameters are mainly two attribute parameters: column width and number of columns.

Parameters	Parameter description
<column-width>	Used primarily to define the width of each column in multiple columns
<column-count>	Used primarily to define the number of columns in multiple columns

Instance code:

<! DOCTYPE html>"Utf-8"> <title> Multi-column layout--columns</title> <style type="Text/css">. columns{width:500px;            padding:5px;            border:2px solid slateblue;            margin:40px Auto; -webkit-columns:100px 4;            -moz-columns:100px 4;            -o-columns:100px 4;            -ms-columns:100px 4; columns:100px  4 ;        } h1{Color:blue; }    </style>class="Columns"> softly I go, as I gently come, I gently waved to the west of the clouds.        　        The golden Willow on the river is the bride in the sunset, and the vivid shadows in the waves are rippling in my heart.        　        The green Xing on the soft mud, the oil in the underwater swagger; in the soft wave of Cambridge, I am willing to do a weed!        　        The pond under the shade of elm is not a spring, it is a rainbow in the sky, and it is crushed in the floating algae, settling a rainbow-like dream. A dream?        　        Support a long pole, to the grass more green place, full of a ship star, in the stars in the colorful singing.        　        But I can not sing aloud, silently is parting of the Sheng Xiao, summer insects also for my silence, Silence is tonight's Kangqiao!    Quietly I walked, as I quietly came; I waved my sleeves without taking a cloud. </p></div></body>
Effect:
CSS3 Column-count Properties
The Column-count attribute specifies the number of columns the element should be divided into.
Grammar
Column-count:number|auto;
The value describes  the optimal number of columns to be divided by the content of the test numbers element.
Auto is determined by other properties, such as "Column-width".
code example:
<! DOCTYPE html>"Utf-8"> <title> Multi-column layout--columns</title> <style type="Text/css">. columns{width:500px;            padding:5px;            border:2px solid slateblue;            margin:40px Auto; -moz-column-count:3; /* Firefox * /-webkit-column-count:3; /* Safari and Chrome */ column-count:3 ; }    </style>class="Columns"> <p>softly I go, as I gently come, I gently waved to the west of the clouds.        The golden Willow on the river is the bride in the sunset, and the vivid shadows in the waves are rippling in my heart.        The green Xing on the soft mud, the oil in the underwater swagger; in the soft wave of Cambridge, I am willing to do a weed!        The pond under the shade of elm is not a spring, it is a rainbow in the sky, and it is crushed in the floating algae, settling a rainbow-like dream. A dream?        Support a long pole, to the grass more green place, full of a ship star, in the stars in the colorful singing.        But I can not sing aloud, silently is parting of the Sheng Xiao, summer insects also for my silence, Silence is tonight's Kangqiao!    Quietly I walked, as I quietly came; I waved my sleeves without taking a cloud. </p></div></body>
Effect:
CSS3 Column-gap Properties
The Column-gap property specifies the interval between columns.
Note: If Column-rule is set between columns, it is displayed in the middle of the interval.
Grammar
Column-gap:length|normal;
 
  
 
  
   
 
    
 
     
Length
 
     
Sets the interval between columns to the specified length.
 
     
 
    
 
    
 
     
Normal
 
     
Specifies that the interval between columns is a regular interval. The recommended value is 1em.
 
    
 
   
 
 
  
code example:
<! DOCTYPE html>"Utf-8"> <title> Multi-column layout--columns</title> <style type="Text/css">. columns{width:500px;            padding:5px;            border:2px solid slateblue;            margin:40px Auto; -moz-column-count:3;/*Firefox*/-webkit-column-count:3;/*Safari and Chrome*/ column-count:3; Column- gap:50px; }    </style>class="Columns"> <p>softly I go, as I gently come, I gently waved to the west of the clouds.        The golden Willow on the river is the bride in the sunset, and the vivid shadows in the waves are rippling in my heart.        The green Xing on the soft mud, the oil in the underwater swagger; in the soft wave of Cambridge, I am willing to do a weed!        The pond under the shade of elm is not a spring, it is a rainbow in the sky, and it is crushed in the floating algae, settling a rainbow-like dream. A dream?        Support a long pole, to the grass more green place, full of a ship star, in the stars in the colorful singing.        But I can not sing aloud, silently is parting of the Sheng Xiao, summer insects also for my silence, Silence is tonight's Kangqiao!    Quietly I walked, as I quietly came; I waved my sleeves without taking a cloud. </p></div></body>
Effect:
CSS3 Column-rule Properties
Specify the width, style, and color rules between columns:
Grammar
Column-rule:column-rule-width Column-rule-style Column-rule-color;
 
   
 
  
    
 
     
 
      
value
 
      
Description
 
     
 
     
 
      
Column-rule-width
 
      
Sets the width rule between columns.
 
     
 
     
 
      
Column-rule-style
 
      
Sets the style rules between columns.
 
     
 
     
 
      
Column-rule-color
 
      
Sets the color rules between columns.
 
     
 
    
 
 
   
code example:
<! DOCTYPE html>"Utf-8"> <title> Multi-column layout--columns</title> <style type="Text/css">. columns{width:500px;            padding:5px;            border:2px solid slateblue;            margin:40px Auto; -moz-column-count:3;/*Firefox*/-webkit-column-count:3;/*Safari and Chrome*/column-count:3; Column-gap:50px; -moz-column-gap:50px;/*Firefox*/-webkit-column-gap:50px;/*Safari and Chrome*/-moz-column-rule:5px outset blue; -webkit-column-rule:5px outset blue; Column-rule:5px outset blue; }    </style>class="Columns"> <p>softly I go, as I gently come, I gently waved to the west of the clouds.        The golden Willow on the river is the bride in the sunset, and the vivid shadows in the waves are rippling in my heart.        The green Xing on the soft mud, the oil in the underwater swagger; in the soft wave of Cambridge, I am willing to do a weed!        The pond under the shade of elm is not a spring, it is a rainbow in the sky, and it is crushed in the floating algae, settling a rainbow-like dream. A dream?        Support a long pole, to the grass more green place, full of a ship star, in the stars in the colorful singing.        But I can not sing aloud, silently is parting of the Sheng Xiao, summer insects also for my silence, Silence is tonight's Kangqiao!    Quietly I walked, as I quietly came; I waved my sleeves without taking a cloud. </p></div></body>
Effect:
CSS3 Column-width Properties
The Column-width property specifies the width of the column.
Grammar
Column-width:auto|length;

 
    
 
  
     
 
      
 
       
value
 
       
Description
 
       
 
 
      
 
      
 
       
Auto
 
       
Column widths are determined by the browser.
 
       
 
      
 
      
 
       
Length
 
       
Specifies the width of the column.
 
      
 
     
 
 
    

code example:
<! DOCTYPE html>"Utf-8"> <title> Multi-column layout--columns</title> <style type="Text/css">. columns{width:500px;            padding:5px;            border:2px solid slateblue;            margin:40px Auto; -moz-column-width:100px; /* Firefox * /-webkit-column-width:100px; /* Safari and Chrome */ Column- width:100px; }    </style>class="Columns"> <p>softly I go, as I gently come, I gently waved to the west of the clouds.        The golden Willow on the river is the bride in the sunset, and the vivid shadows in the waves are rippling in my heart.        The green Xing on the soft mud, the oil in the underwater swagger; in the soft wave of Cambridge, I am willing to do a weed!        The pond under the shade of elm is not a spring, it is a rainbow in the sky, and it is crushed in the floating algae, settling a rainbow-like dream. A dream?        Support a long pole, to the grass more green place, full of a ship star, in the stars in the colorful singing.        But I can not sing aloud, silently is parting of the Sheng Xiao, summer insects also for my silence, Silence is tonight's Kangqiao!    Quietly I walked, as I quietly came; I waved my sleeves without taking a cloud. </p></div></body>
Effect:
2017-08-22 19:59:44
CSS3 multi-Column Layout--columns