A veces hemos visto en muchos sitios web que el contenido se apila en paralelo entre sí para mostrar más contenido para leer. Este patrón también se sigue en los periódicos o en los libros para conseguir leer el contenido a la vez. Este tipo de patrón generalmente ayuda a mostrar el contenido de gran tamaño en el área pequeña que requerirá el mínimo esfuerzo. En este artículo, aprenderemos cómo organizar el contenido en varias líneas de manera apilada en paralelo usando HTML y CSS. La siguiente imagen ilustra el concepto.
Aquí puede ver que presentamos el contenido en cuatro filas diferentes para que sea más cómodo de ver. Organizar el texto en varias columnas usando solo CSS es una tarea bastante fácil de hacer. Hay propiedades CSS disponibles, al usar esas propiedades, podemos crear tantas columnas como queramos, también podemos establecer el espacio entre las columnas. Todas las propiedades requeridas se describen a continuación:
- CSS column-count : esta propiedad se utiliza para contar el número de elementos de columna en un documento que se debe dividir.
- CSS column-gap: esta propiedad se utiliza para definir el espacio entre columnas.
- CSS column-rule-style: esta propiedad se utiliza para especificar el estilo entre las columnas.
- CSS column-rule-width: esta propiedad se utiliza para especificar el ancho de la regla entre columnas.
- CSS column-rule-color: Esta propiedad se utiliza para definir el color entre las columnas.
- CSS columna-regla: Esta propiedad se usa para definir el estilo, ancho, color de la regla entre columnas.
- CSS column-span: esta propiedad se usa para definir un elemento que debe abarcar cuántas columnas.
- CSS column-width: esta propiedad se utiliza para especificar el ancho de cada columna.
Consulte el CSS | Artículo de columnas múltiples para crear textos de columnas de estilo múltiple y diferente.
Enfoque: Utilizaremos dos métodos diferentes para realizar esta tarea:
- Mediante el uso de la propiedad column-count que define el número de columnas en las que se puede dividir un elemento.
- Usando las propiedades genéricas de CSS como float, padding, text-align y la propiedad width.
Usaremos los dos enfoques anteriores y los entenderemos a través de los ejemplos.
Ejemplo 1: En este ejemplo, usaremos la propiedad column-count y estableceremos la propiedad en 4 para que el número de columnas sea 4.
HTML
<!DOCTYPE html>
<html>
<head>
<style>
.geeks_content {
-webkit-column-count: 4;
-moz-column-count: 4;
column-count: 4;
padding-top: 35px;
text-align: justify;
}
.gfg {
text-align: center;
font-size: 40px;
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:
Ejemplo 2: En este ejemplo, usaremos las propiedades genéricas de CSS para organizar la columna de varias líneas de manera similar para lograr el mismo resultado.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Multi-line text arrangement</title>
<style>
* {
box-sizing: border-box;
}
/* CSS property for header section */
.header {
background-color: green;
padding: 15px;
text-align: center;
}
/* CSS property for content section */
.columnA,
.columnB,
.columnC {
float: left;
width: 31%;
padding: 15px;
text-align: justify;
}
</style>
</head>
<body>
<div class="header">
<h2 style="color: white; font-size: 200%">
GeeksforGeeks
</h2>
</div>
<div class="row">
<div class="columnA">
<h2>Column A</h2>
<p>
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.
</p>
</div>
<div class="columnB">
<h2>Column B</h2>
<p>
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.
</p>
</div>
<div class="columnC">
<h2>Column C</h2>
<p>
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.
</p>
</div>
</div>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por skyridetim y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA