Las columnas múltiples se utilizan para crear un diseño de columna en las páginas web. Hay muchas propiedades de columna en CSS que se enumeran a continuación:
- recuento de columnas
- espacio entre columnas
- estilo de regla de columna
- columna-regla-ancho
- columna-regla-color
- regla de columna
- vano de columna
- ancho de columna
La propiedad column-count: esta propiedad se utiliza para contar el número de elementos de columna en el documento que se deben dividir.
Ejemplo:
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>
Producción:
La propiedad column-gap: Esta propiedad se utiliza para definir el espacio entre columnas.
Ejemplo:
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>
Producción:
La propiedad column-rule-style: esta propiedad se utiliza para especificar el estilo entre las columnas.
Ejemplo:
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>
Producción:
La propiedad column-rule-width: esta propiedad se utiliza para especificar el ancho de la regla entre columnas.
Ejemplo:
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>
Producción:
La propiedad column-rule-color: Esta propiedad se utiliza para definir el color entre las columnas.
Ejemplo:
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>
Producción:
La propiedad de regla de columna: esta propiedad se utiliza para definir el estilo, el ancho y el color de la regla entre columnas.
Ejemplo:
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>
Producción:
La propiedad column-span: esta propiedad se usa para definir un elemento que debe abarcar cuántas columnas.
Ejemplo:
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>
Producción:
La propiedad de ancho de columna: esta propiedad se utiliza para especificar el ancho de cada columna.
Ejemplo:
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>
Producción:
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA