Búsqueda personalizada
 
 
 
 
Múltiples columnas dinámicas (column-width)
   

Con la propiedad column-width tambin generamos mltiples columnas. Tiene sentido emplearla cuando nuestro diseo es flexible, es decir que si modificamos el tamao de la ventana del navegador su contenido se relocaliza.

Con la propiedad column-width especificamos el ancho de la columna en pxeles, porcentaje etc. y luego se generan tantas columnas como entren en el contenedor.

La sintaxis es la siguiente:

Elemento { 
     column-width: ancho; 
}

Si queremos crear un recuadro con texto y que cada columna ocupe 150 pxeles luego codificamos:

#recuadro1{
  -moz-column-width:200px;
  -webkit-column-width:200px;
  column-width:200px;
  border-radius: 20px;  
  background-color:#ddd;
  padding:10px;
}

El resultado puede variar dependiendo las dimensiones de la ventana del navegador (siempre y cuando hayamos creado una pgina web fluida, es decir sin un ancho fijo):





Una mejora a la disposicin del texto dentro de las columnas es inicializar la propiedad text-indent y margin:

#recuadro2 p {
  text-indent: 1em;
  margin: 0;
  text-align: justify;
}

Luego el resultado grfico queda:


 
 
       

¿Quienes somos?

Condiciones de uso

Publicidad

Privacidad de la informacion