En este artículo, aprenderemos a especificar el ancho óptimo para las columnas en CSS. La propiedad de ancho de columna de CSS se usa para especificar el ancho óptimo para las columnas.
Enfoque: podemos especificar el ancho óptimo para las columnas en CSS usando la propiedad de ancho de columna . Establecemos un valor para el ancho de columna, y todos los anchos de columna no son menores que el valor especificado.
Sintaxis:
column-width: value;
Ejemplo 1: El siguiente ejemplo demuestra cómo establecer la propiedad de ancho de columna . La salida da como resultado cuatro columnas para el contenido.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg{
font-size: 30px;
column-width: 160px;
}
</style>
</head>
<body>
<div class="parent" style="width:50%;">
<div class="gfg">
GeeksforGeeks is my favourite site where
i can gain a lot of knowledge and can
also share my knowledge what i have gained
while learning. We can add more
pharagraphs for content. This is just an
example to tell you how to specify
the optimal width for the columns in CSS?
The column width is 160px in this example.
</div>
</div>
</body>
</html>
Producción:
Ejemplo 2: El siguiente ejemplo demuestra la configuración de atributos como column-count y column-width para el contenido del texto.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.gfg{
font-size: 30px;
column-count: 3;
column-width: 160px;
}
</style>
</head>
<body>
<div class="parent" style="width: 50%;">
<div class="gfg">
GeeksforGeeks is my favourite site where
i can gain a lot of knowledge and can
also share my knowledge what i have
gained while learning. We can add more
pharagraphs for content. This is just
an example to tell you how to specify
the optimal width for the columns in CSS?
The column width is 160px in this example.
</div>
</div>
</body>
</html>
Producción:
ancho de columna y recuento de columnas
Publicación traducida automáticamente
Artículo escrito por manikumarsingh789 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA