Css3 attribute column, css3 attribute column

Css3 attribute column, css3 attribute column

CSS3 can design text content into multiple columns of the same newspaper layout. As shown below:

This layout is called "Multi-column layout ".

Learn the attributes of multiple columns separately:

Ie10 + supports all column attributes, while firefox does not support column-span. All browsers except firefox do not support the column-fill attribute.

1. column-count: Number of columns to be split

<Div> I remember that when I was a teenager, everyone was sincere and sincere. In the morning, at the railway station, there were no pedestrians in the Long Street, and the shops selling soy milk braved the heat. The previous days became slower, cars, horses, and emails are slow, and you can only love one person in your life. The locks in the past look good, and the keys look beautiful. You will understand them when you lock them. </Div>

div {    -moz-column-count: 3;         column-count: 3;}

After testing, firefox (version 49.0.1) needs to add the-moz-prefix, chrome, opera, and safari. It can be displayed normally without the-webkit-prefix. ie10 +, you do not need to add a prefix to the edge to display it normally. After the page is reduced (only two columns are displayed due to insufficient words in the text:

 

2. column-gap: gap Between Columns and columns

The default value of ie is 16px, which is not explicitly provided by other browsers.

<Div> when I was young, I dreamed of changing the world. When I was mature, I found that I could not change the world, but I shortened my eyes, I decided to change my country only. When I entered the twilight years, I found that I could not change our country. My last wish was to change my family, but it was impossible. When I was lying in bed, I suddenly realized that, if I only changed myself at first, then I could change my family. With the help and encouragement of my family, I may do something for my country. Who knows? I may even change the world. </Div>

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;         }

Like border, either width or color can be omitted in the three attributes. the browser uses the default width and color, but the style cannot be omitted.Test in Google Chrome:

(1). Omit width (chrome defaults to 3px, which is not explicitly provided by other browsers)

<Div> after so many years of consulting, I gradually understood one thing. Most of the time, the consultant has an answer in his mind. He just wants to confirm that he is correct. So some people will send a letter again after reading the reply, probably because the answer content is different from what they think. </Div>

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;    -moz-column-rule-style: solid;         column-rule-style: solid;    -moz-column-rule-color: #f00;         column-rule-color: #f00;}

(2). Omit color (rbg (, 0) by default ))

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;    -moz-column-rule-width: 2px;         column-rule-width: 2px;    -moz-column-rule-style: solid;         column-rule-style: solid;}

(3). Both width and color are omitted.

div {    -moz-column-count: 4;         column-count: 4;    -moz-column-gap: 40px;         column-gap: 40px;    -moz-column-rule-style: dotted;         column-rule-style: dotted;}

 

6. column-span: the number of columns that an element spans (not supported by firefox)

The available values are 1 and all. The default value is 1. Firefox does not support this attribute. However, when this attribute is used, the monetization effect is the same as that of column-span: 1;, so you can safely use column-span: 1; we do not recommend using column-span: all;

<Div> 
div {    -moz-column-count: 4;         column-count: 4;}h2 {    -moz-column-span: 1;         column-span: 1;}

Unlike other attributes, column-span is used on sub-elements to indicate the number of columns to be crossed, as if the col-span attribute is the same in the table. Because the value is 1 rather than all, the display effect in firefox is the same as that in other browsers.
 
7. column-width: column width
<Div> I used to think: "There are many friends who can become friends, it must be something that has something in common or similar with lifestyle, hobbies, temper, nature, pursuit, views on things, and style of affairs. You can meet people you think of every time you are quiet, and people you can't wait to know whenever you are idle. People who can get to know each other and are willing to spend time walking into a person's heart should try harder. A friend has lost one, and you still have many, but the person you lose your favorite is yours !" </Div>
div {    -moz-column-count: 4;         column-count: 4;    -moz-column-width: 200px;         column-width: 200px;    }

This attribute requires a lot of requirements: the product of the number of columns and the width (column-count * column-width) should be smaller than the width of the page to display the expected effect of the four columns. When the number of words in the text is relatively small and the page is relatively wide, it cannot display four columns, and there may be only three or fewer columns.
 
8. column-fill: how to fill Columns
Currently, this attribute is only supported by firefox, and fill is translated as filling. Therefore, column-fill specifies the filling method of columns. There are two values available: balance and Column Length balance. The browser should minimize the length of the column. Auto: columns are filled sequentially. They have different lengths.
 
9. columns: Specify the column width and quantity.
This is a write-in attribute, Which is column-width, column-count, and co-write.
<Div> when he quietly leaves in his "I" Life, "I" often reminds me of the scenes on the platform this summer morning, "I" suddenly broke into his life when he was 21 years old, and he was fully filled with his life. His original happiness was not crowded. When he put "I" into adult care, "I" left him on the platform without knowing it. The family in the world is like a cup of coffee. The family established by adoption is a cup of bitter coffee. The person who wants to drink coffee is gone. He knows that there is better coffee waiting for him, later, the cup of coffee became bitter. But I believe that people who drink coffee will come back. </Div>
div {    -moz-columns: 150px 4;         columns: 150px 4;    }
Not all of the write-in attributes meet the width and count conditions. In this example, we leave aside the spacing between each column, and assume that the spacing between each column is 0. When the text width is no less than PX, the text will always show four columns (at least four columns are displayed, and four columns must be displayed if the text has enough words ), if the text width is smaller than PX, the text is displayed as three columns. If the text width is less than PX, the text is displayed as two columns.
In this example, the number of columns displayed for different element widths varies.
Shown as 4 columns:

Three columns are displayed:

Two columns are displayed:

Shown as 1 column:

Conclusion: This write-in attribute can be understood as (or assuming that the spacing between each column is 0): When the available width of an element is small, it only displays one column; when the available width of an element is not less than count * 2, it displays two columns. When the available width of an element is not less than count * 3, it displays three columns. According to this rule, when the available width of the element is not less than count * width, it is displayed as the width column.

 
Some conjecture:
When the available width of the element is determined, how should the page be laid out when both column-width and column-count and coiumn-gap are set?
After testing, the following conclusions can be drawn:
1. The summary in the ninth point is still valid here;
2. When the element width can be exclusive to two or more columns (if one column is used, there is no spacing), the column-gap spacing can always be satisfied.