Multi-column layout (Multi-column)
Multi-column layout is to design text content into a multi-column layout like a newspaper. In other words, the waterfall flow that we could achieve through js or JQuery before can be achieved directly through CSS in CSS3, although there are compatibility issues. .
compatibility
IE10+, FireFox16+, Chrome26+, Safari6.1+, Opera12.1
Properties of multi-column layout
CSS3 provides a series of properties to implement multi-column layout, as shown in the following table:
1.columns sets the number of columns of the object and the width of each column
Sets or retrieves the object's number of columns and the width of each column.
grammar:
columns:<'column-width'>||<'columns-count'>;
Parameter description:
(1) The first parameter refers to the width of each column
(2) The second parameter refers to the number of columns. You can write two or one.
The two parameters give priority to the number of columns (in the case of lowering). If the width is not enough (number of columns * set width > width of container), it will automatically reduce one column and automatically widen the width of the paragraph to reach the width of the container. Appropriate spacing is automatically generated in the middle.
Example:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Multiple column layout</title><style>*{margin:0;padding:0;}div.test1,div.test2{border :20pxsolidrgba(0,0,0.3 );}div.test1{width:900px;-webkit-columns:300px4;-moz-columns:300px4;columns:300px4;}div.test1>div{margin-top:20px;border:2pxsolidred;}div.tes t2{-webkit-columns:400px;-moz-columns:400px;columns:400px;}div.test2>div{margin-top:20px;border:2pxsolidred;}</style></head><body>< div><div>from Dennis Ritchie, the inventor of C language, initially positioned his invention as a system. It is not a graphical software itself. It should include developing drivers, system kernel, file management, internal management, and network. Communication and a series of core ones, so you only need to learn the syntax of C language, but also other subjects such as operating system principles, communication protocols, compiler principles, data structures, etc. to complete the previous requirements. </div><div>At this time, when you see the motherboard manual in English, you will know which interface should be read, how the communication protocol is stipulated, how many bytes should be read...and so on, before you can write Only the driver can write the kernel before it can communicate. To this extent, even if the demand for talents in enterprises in society is higher than Fewer, but there is no problem of not being able to find a job at all. Instead, you choose a job and even pay for it, because not only can you do these, but also many related jobs, such as driver development, DNS resolution, anti-virus, communication security, virtualization, etc. It is capable of using technology and kernel tailoring, and can even develop a new operating system by itself. </div><div>Having said that, in our current environment, the teaching orientation of C language in most universities is that in addition to C language courses, only some colleges should also offer data structure, computer architecture, compiler principles, Courses such as operating system principles, and some schools only retain data structures in these courses, or even no longer offer data structures. Therefore, C language is only positioned as programming enlightenment, and it is enough to be familiar with process-oriented thinking and C language syntax. </div><div>The school hopes that after learning C language, they can then learn C++ or Java or other high-level languages so that they can make more practical things and find a job easily. If they are more eager for success, they can just use C language. No more learning, just learn Java or C++ or other high-level languages with zero foundation. This is actually the difference between a professional class and a training institution. If you don’t learn knowledge in vain, you should think more about whether it is useful or not. </div></div><br><div><div>So judging from the current overall environment, if you are majoring in computer/software at a key college, then you should work hard on these real materials. Things, don’t waste the country’s teaching resources, because you are responsible for the future of the country’s IT software industry; if you want to engage in software R&D/development, then you must at least learn the data structure well, because you have to create, not copy. Paste code porter. If you just want to earn a living, just learn a technique that can produce results. </div><div>Finally, let’s take a look at the common purposes for students to learn C language. From junior college to bachelor’s degree, postgraduate entrance examination, and second-level C language, demand-oriented tutorials are mostly based on theoretical questions, practice questions, and exams, so the project type There are much less difficult C language resources, so naturally you rarely see graphical things. Of course, as a staunch supporter of the C language, Dotcpp will also strengthen the programming resources here in the future to provide everyone with sufficient resource support. </div><div>When we learn C language, because we choose console programs, your programs are run in a black window. If you write a windows application, there will be no such black window, and the syntax of C language will still be used. , everyone can understand. </div><div>If it is graphical development in pure C language, depending on your stage, you can consider using the graphics interface function supported by the TurBoC compiler or installing the easyX library in VC6 to achieve graphical development. Complete the development of some games, such as backgammon, Tetris, pinball games, Snake, etc., which are all graphical and interactive. For more advanced ones, considering picture refresh and professional improvement, you can consider using MFC. MFC or QT. </div></div></body></html>Running results:
Set the columns of div.test1: 300px 4; that is, the width of each column is 300px, and there are 4 columns in total, but the container is 900px, which is less than 1200px, so the number of columns will be automatically reduced, and the column width will be appropriately increased to display in the most appropriate way. . However, div.test2 does not set the container width, the column width is set to 300px, and the number of columns is set to 4 columns. The number of columns will be considered to optimize the column width.
Note: Set the columns of div.test1: 300px 4; that is, the width of each column is 300px, and there are 4 columns in total, but the container is 900px, which is less than 1200px, so the number of columns will be automatically reduced, and the column width will be increased appropriately to achieve the most appropriate method. to display. However, div.test2 does not set the container width, the column width is set to 300px, and the number of columns is set to 4 columns. The number of columns will be limited to optimize the column width.
2. column-width sets the column width
grammar:
columns-width:<length>|auto default;
: Use the length value to define the column width, no negative values are allowed; auto: Customize the width according to the number of columns.
Although the column width is set, the width will be automatically allocated based on the number of columns and the width of the container.
PS: The gap in each column is 14 pixels.
3. column-count sets the number of columns
Sets or retrieves the number of columns of an object.
grammar:
column-count：<integer>|auto;
Parameter description:: Use integer values to define the number of columns, no negative values are allowed; auto: Customize the allocation width according to the column width.
4. column-gap sets the gap between columns
Sets or retrieves the gaps between columns of an object.
grammar:
column-gap：<length>|normal;
Parameter description: Use the length value to define the gap between columns (not the distance between words, but the distance between paragraphs), negative values are not allowed; normal: the same as the font size. norm al spacing depends on font size. Same as font size.
Example:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><title>Multiple column layout</title><style>*{margin:0;padding:0;}div.test1,div.test2,div .test3{ border:20pxsolidrgba(0,0,0.3);}div.test1>div,div.test2>div,div.test3>div{background-color:rgb(0,0,0,.3);margin-top: 20px;}di v.test1{width:900px;columns:300px4;font-size:14px;}div.test2{columns:400px;font-size:30px;}div.test3{column-count:4;column- gap:14px;}</style></head><body><h3>Font: 14px, no gap set: the default is the same as the font, 14px;</h3><div><div>Many friends who have studied C language When you look back at the C language, you will definitely have this question: Why does the C language run in a black window? A program that either calculates the area of a triangle or prints the number of daffodils? No matter how great the programming was, why can’t we still do those cool software? In the end, it’s just childish! Why. </div><div>First, the positioning of the invention of C language, from the beginning of its invention by Dennis Ritchie, the inventor of C language, we know that it is to be a system, not a graphical software itself, it should be It includes a series of core tasks such as developing drivers, making system kernel, file management, internal management, network communications, etc. </div><div>Second, the common teaching positioning in China. Having said that, in our current environment, the teaching positioning of most universities for C language is that only some colleges should offer data structures in addition to C language courses. , computer architecture, compiler principles, operating system principles and other courses. </div><div>In addition, the Wan'an County Commission for Discipline Inspection and Supervision has investigated the performance of duties by relevant units and personnel such as the County Education and Sports Bureau, the County Market and Quality Supervision Administration, and the Jiantian Township Government, and reviewed the supervision The responsible persons of the county Education and Sports Bureau, the County Market and Quality Supervision Administration, the County Agriculture Bureau, the County Health and Family Planning Commission, the Jiantian Township Government and other relevant units who failed to do their job have separately filed and reviewed the cases. At the same time, the County Commission for Discipline Inspection and Supervision will conduct an investigation into the bidding process for student nutritional meals, and will announce the results to the public as soon as they are available. </div></div><br><h3>Font: 30px, no gap set: the default is 30px, the same as the font;</h3><div><div>Many friends who have studied C language are looking back at C When it comes to languages, there will definitely be questions like this: Why does C language run under a black window? A program that either calculates the area of a triangle or prints the number of daffodils? No matter how great the programming was, why can’t we still do those cool software? In the end, it’s just childish! Why. </div><div>First, the positioning of the invention of C language, from the beginning of its invention by Dennis Ritchie, the inventor of C language, we know that it is to be a system, not a graphical software itself, it should be It includes a series of core tasks such as developing drivers, making system kernel, file management, internal management, network communications, etc. </div><div>Second, the common teaching positioning in China. Having said that, in our current environment, the teaching positioning of most universities for C language is that only some colleges should offer data structures in addition to C language courses. , computer architecture, compiler principles, operating system principles and other courses. </div><div>Third, C language can be used to do it, but it is rarely done directly in C language. When we learn C language, we choose console programs, so your programs run in a black window. If you write a windows application, there will be no such black window. It will still be the syntax of C language, which everyone can understand. </div></div><br><h3>Font: 30px, setting gap: 14px;</h3><div><div>Many friends who have studied C language will definitely know when they look back at C language I have this question, why does C language run under a black window? A program that either calculates the area of a triangle or prints the number of daffodils? No matter how great the programming was, why can't we still do those cool software? In the end, it's just childish! Why. </div><div>First, the positioning of the invention of C language, from the beginning of its invention by Dennis Ritchie, the inventor of C language, we know that it is to be a system, not a graphical software itself, it should be It includes a series of core tasks such as developing drivers, making system kernel, file management, internal management, network communications, etc. </div><div>Second, the common teaching positioning in China. Having said that, in our current environment, the teaching positioning of most universities for C language is that only some colleges should offer data structures in addition to C language courses. , computer architecture, compiler principles, operating system principles and other courses. </div><div>Third, C language can be used to do it, but it is rarely done directly in C language. When we learn C language, we choose console programs, so your programs run in a black window. If you write a windows application, there will be no such black window. It will still be the syntax of C language, which everyone can understand. </div></div></body></html>Running results:
5. column-rule sets the border between columns
grammar:
column-rule:<column-rule-width>||<column-rule-style>||<column-rule-color>
Parameter description
● column-rule-width The thickness of the border
●column-rule-style border style
●column-rule-color border color
PS: Pay special attention to the fact that if the gap between columns < the width of the border, there will be a situation where the columns cover the border.
(1)column-rule-width
Sets or retrieves the border thickness between columns of an object.
grammar:
column-rule-width：<length>|thin|medium|thick;
Parameter description
●length: Use the length value to define the thickness of the border, negative values are not allowed;
●medium: defines the default thickness of the border;
●thin: defines a border that is thinner than the default thickness;
●thick: Defines a border thicker than the default thickness.
(2) column-rule-style sets the style of the border
Sets or retrieves the border style between columns of an object.
grammar
column-rule-style: none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset;
Parameter description
●none: no outline;
●hidden: hide the border;
●dotted: dotted outline;
●dashed: dashed outline;
●solid: solid outline;
●double: double line outline;
●groove: 3D groove profile;
●ridge: 3D convex groove profile;
●inset: 3D concave edge contour;
●outset: 3D convex edge outline.
Note: If there is an outline with two lines, the width will include the distance between the two lines.
(3) column-rule-color sets the border color
Sets or retrieves the border color between columns of an object.
grammar:
column-rule-color:<color>;
Parameter description: Specify color. Without width and style, the color will fail. Default black.
6. column-span sets the element to span all columns
Sets or retrieves whether the object element spans all columns.
grammar:
column-span: none|all;
Parameter description: none: does not span columns; all: spans all columns.
It is not used in the container like other column attributes, but in the child elements of the container.
7. column-fill sets the height of columns to be unified (currently not compatible with mainstream browsers)
Sets or retrieves whether the height of all columns of the object is uniform.
grammar:
column-fill:autodefault|balance;
Parameter description: auto: column height adaptive content; balance: the height of all columns is unified with the highest column.
Major browsers are not compatible with this attribute.
8. column-break sets newline
●column-break-before sets whether to break a line before the specified object.
●column-break-after sets whether to break a line after the specified object.
●column-break-inside sets whether to break lines inside the object
(1)column-break-before
Whether to break lines before setting or retrieving the object.
grammar:
column-break-before: auto|always|avoid;
Parameter description: auto: neither forces nor prohibits breaking lines before elements and generating new columns; always: always breaking lines before elements and generating new columns; avoid: avoiding breaking lines before elements and generating new columns.
(2)column-break-after
Whether to break lines after setting or retrieving the object.
grammar:
column-break-after：auto|always|avoid;
Parameter description: auto: neither forces nor prohibits breaking lines after elements and generating new columns; always: always breaking lines after elements and generating new columns; avoid: avoiding breaking lines after elements and generating new columns.
(3) column-break-inside attribute
Sets or retrieves whether lines are broken inside the object.
grammar:
column-break-inside:autodefault|avoid