多列用于在网页中创建列布局。CSS中有许多列属性，如下所示：
null
- 列计数
- 柱间隙
- 列规则样式
- 列规宽度
- 列规则颜色
- 列规则
- 柱跨
- 列宽
列计数属性： 此属性用于计算文档中应划分的列元素数。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-count property</ title > < style > .geeks_content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; text-align:justify; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
columns gap属性： 此属性用于定义列之间的间距。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column gap</ title > < style > .geeks_content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; text-align:justify; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; width:100%; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
列规则样式属性： 此属性用于指定列之间的样式。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-rule-style property</ title > < style > .geeks_content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; column-rule-style:solid; text-align:justify; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
列规则宽度属性： 此属性用于指定列之间规则的宽度。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-rule-width property</ title > < style > .geeks_content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; -webkit-column-gap: 40px; -moz-column-gap: 50px; column-gap: 50px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; width:100%; text-align:justify; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
列规则颜色属性： 此属性用于定义列之间的颜色。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-rule-color property</ title > < style > .geeks_content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; width:100%; text-align:justify; -webkit-column-rule-color: green; -moz-column-rule-color: green; column-rule-color: green; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
列规则属性： 此属性用于定义列之间规则的样式、宽度和颜色。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-rule property</ title > < style > .geeks_content { -webkit-column-count: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; -webkit-column-rule: 10px solid green; -moz-column-rule: 10px solid green; column-rule: 10px solid green; width:100%; text-align:justify; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
![图片[6]-CSS |多列-yiteyi-C++库](https://www.yiteyi.com/wp-content/uploads/geeks/geeks_col6.png)
column span属性： 此属性用于定义元素应跨越多少列。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-span property</ title > < style > .geeks_content { -webkit-column-span: 3; column-span: 3; -moz-column-count: 3; column-count: 3; padding-top:35px; -webkit-column-gap: 50px; -moz-column-gap: 50px; column-gap: 50px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-width: 10px; -moz-column-rule-width: 10px; column-rule-width: 10px; width:100%; text-align:justify; -webkit-column-rule-color: green; -moz-column-rule-color: green; column-rule-color: green; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
列宽属性： 此属性用于指定每列的宽度。
例子：
HTML
<!DOCTYPE html> < html > < head > < title >Column-width property</ title > < style > .geeks_content { margin-top:35px; -webkit-column-width: 250px; -moz-column-width: 250px; column-width: 250px; text-align:justify; } .gfg { text-align:center; font-size:40px; font-weight:bold; color:green; } .geeks { text-align:center; } </ style > </ head > < body > < div class = "gfg" >GeeksforGeeks</ div > < div class = "geeks" >A computer science portal for geeks</ div > < div class = "geeks_content" > Sudo Placement: Prepare for the Recruitment drive of product based companies like Microsoft, Amazon, Adobe etc with a free online placement preparation course. The course focuses on various MCQ's & Coding question likely to be asked in the interviews & make your upcoming placement season efficient and successful. Placement preparation solely depends on the company for which you are preparing. There are basically three different categories into which we can divide the companies visiting campuses for placements based on their recruitment process. Mass Recruiters, Tech Giants, Others / Start-ups Companies belonging to the above categories have their own recruitment process. In this course, we will try to cover every possible detail required to know for cracking interview of the companies falling in each of the above categories. </ div > </ body > </ html > |
输出：
© 版权声明
文章版权归作者所有，未经允许请勿转载。
THE END
![关于”PostgreSQL错误：关系[表]不存在“问题的原因和解决方案-yiteyi-C++库](https://www.cppku.com/wp-content/themes/zibll/img/thumbnail.svg)
