CSS | Несколько столбцов
Опубликовано: 1 Марта, 2022
Несколько столбцов используются для создания макета столбцов на веб-страницах. В CSS есть много свойств столбцов, которые перечислены ниже:
- счетчик столбцов
- колонна-пробел
- стиль правила столбца
- ширина правила столбца
- столбец-правило-цвет
- столбец-правило
- колонна-пролет
- ширина колонки
Свойство column-count: это свойство используется для подсчета количества элементов столбца в документе, которые следует разделить.
Example:
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: это свойство используется для определения промежутка между столбцами.
Example:
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> |
Выход:
Свойство column-rule-style: это свойство используется для определения стиля между столбцами.
Example:
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> |
Выход:
Свойство column-rule-width: это свойство используется для указания ширины правила между столбцами.
Example:
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> |
Выход:
Свойство column-rule-color: это свойство используется для определения цвета между столбцами.
Example:
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> |
Выход:
Свойство правила столбца: это свойство используется для определения стиля, ширины и цвета правила между столбцами.
Example:
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;РЕКОМЕНДУЕМЫЕ СТАТЬИ |