About properties related to multi-column layout columns in CSS3

Added properties that enable multi-column layouts in CSS3

The implementation before this is cumbersome and may require a variety of positioning
Now all we need is an attribute to implement
Multi-column layouts are similar to our newspaper layouts
This makes it easy for readers to watch

Multi-column quantity and multi-column width

If a line of text is too long, we may not have the desire to read it like this

<p class= "Demo" >......</p>

. demo {    width:600px;    height:200px;    BORDER:1PX solid black;}

Multi-Column Quantity column-count You can specify the number of columns you want
The browser will set the appropriate column widths for you

. demo {    width:600px;    height:200px;    border:1px solid black;    Column-count:3; /* Increment */}

You can also use Column-width to set column widths without specifying the number of columns
And the code above is equivalent.

. demo {    width:600px;    height:200px;    border:1px solid black;    Column-width:11em; /* Change */}

If you set the width value not enough to fill the entire element
Then the browser will try to use the maximum width to guarantee the number of columns to fill the entire element
For example, the above 11em changed to 10em, the browser will also display 3 columns layout

Shorthand for multiple-column syntax

Column-count and Column-width can synthesize a composite property columns
You can use this property to set the column width, number of columns, or both
However, when used in general, setting one of these properties will meet our needs.

. demo {    width:600px;    height:200px;    border:1px solid black;    Columns:3;    /* or columns:11em;*//    * or Columns:11em 3;*/}

Column interval width

This interval exists between multiple column layout columns and columns
The default interval is 1em
We can control the column interval through the Column-gap property

. demo {    width:600px;    height:200px;    border:1px solid black;    Columns:3;    Column-gap:2em; /* Increment */}

Note that if your column interval is set too large, the text will overflow
So you should be able to match the appropriate number of columns to control

Elements across columns

I add a caption element to the text and change the height

<p class= "Demo" >
. demo {    width:600px;    height:280px;/* Change * * *    border:1px solid black;    Columns:3;}

By default, the H1 element only occupies the first column
What if I want to put him on top of more than one column?


 

Setting styles on H1 elements

h1 {    column-span:all; <--    Text-align:center;}

Column-span can specify the number of columns that the element spans the default property value is 1
Set to all to allow elements to span all columns

Column interval style

If you think the column and column are just spaces spaced too boring
We can set the "rule" by column-rule the heap column interval
This property is a composite property with the following sub-properties


 

 
  
 
   
Column-rule-width
 
   
Column-rule-style
 
   
Column-rule-color
 
  

 
Sort of like we set the border property

. demo {    width:600px;    height:200px;    border:1px solid black;    Columns:3;    COLUMN-RULE:1PX solid black;}

In this way, a solid black line of 1 pixels wide is used between columns and columns.

Colum-rule-width In addition to the ability to set pixels,
There are also three keywords thin, medium, thick set three widths
The Column-rule-style property value has the following keywords


 

 
  
 
   
None None
 
   
Hidden hidden
 
   
Dotted dot-like
 
   
Dashed dashed line
 
   
Solid Solid Line
 
   
Double Two-wire
 
   
Groove Definition 3D Grooved rules
 
   
Ridge defining 3D ridged rules
 
   
Inset defining 3D inset rules
 
   
Outset defining 3D outset rules
 
  

 
The effect of the latter four depends on the width and color values, first look


 

CSS3 multiple-column layouts with less
But the basic attributes, we still need to know.