La propiedad de ancho de columnas en CSS se usa para definir el ancho de las columnas. Se requiere el número mínimo de columnas para mostrar el contenido en todo el elemento. Es una propiedad flexible. Si el navegador no puede acomodar al menos dos columnas en el ancho de columna dado, las dos columnas se colocarán en una sola columna.
Sintaxis:
column-width: auto|length|initial|inherit;
Valores de propiedad:
- auto: Es el valor por defecto. El navegador determina el ancho de las columnas.
Sintaxis:
column-width: auto;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: auto;
/* For Firefox browser */
-moz-column-width: auto;
column-width: auto;
}
</style>
</head>
<body>
<h2 >
The column-width Property
</h2>
<div class = "gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
- Producción:
- longitud: Se utiliza para especificar el ancho de las columnas en términos de longitud. La longitud se puede establecer en forma de px, cm, etc.
Sintaxis:
column-width: length;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: 100px;
/* For Firefox browser */
-moz-column-width: 100px;
column-width: 100px;
}
</style>
</head>
<body>
<h2 >
The column-width Property
</h2>
<div class = "gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
- Producción:
- initial: se utiliza para establecer la propiedad de ancho de columna en su valor predeterminado.
Sintaxis:
column-width: initial;
- Ejemplo:
html
<!DOCTYPE html>
<html>
<head>
<title>
CSS column-width Property
</title>
<style>
.gfg {
/* For Chrome, Safari, Opera browsers */
-webkit-column-width: initial;
/* For Firefox browser */
-moz-column-width: initial;
column-width: initial;
}
</style>
</head>
<body>
<h2 >
The column-width Property
</h2>
<div class = "gfg">
The course is designed for students as well
as working professionals to prepare for
coding interviews. This course is going
to have coding questions from school level
to the level needed for product based
companies like Amazon, Microsoft, Adobe, etc.
</div>
</body>
</html>
- Producción:
- heredar: se usa para establecer la propiedad de ancho de columna de su padre.
Navegadores compatibles: los navegadores compatibles con la propiedad de ancho de columna se enumeran a continuación:
- Google Chrome 50.0, 4.0-webkit
- Internet Explorer 10.0
- Firefox 52.0, 2.0-moz-
- Opera 37.0, 15.0-webkit-, 11.1
- Safari 9.0, 3.1-webkit
Publicación traducida automáticamente
Artículo escrito por ManasChhabra2 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA