JMiur [E]

El uso de columnas para organizar el contenido de un página web, es una de las nuevas posibilidades que nos da el CSS3 aunque, como en la mayoría de estos casos, no es aplicable a Internet Explore excepto en su versión 10; el resto de los navegadores (Firefox, Chrome, Safari y Opera) las incorpora sin problemas aunque requiere el uso de prefijos para cada uno de ellos.

Para entender qué significa esto de las columnas, lo mejor es comenzar a entender cómo se ven las cosas de manera normal.

Supongamos que tengo un contenedor (un DIV) con un cierto ancho (width) y dentro de él, coloco seis imágenes cuyos anchos son iguales pero varían su altura:
<style>
  .demo {
    background-color:#000;
    line-height:0;
    margin:0 auto;
    width: 600px;
  .demo img {
    outline: 1px solid Turquoise;
    width: 200px;
  }
</style>

<div class="demo">
  <img src="URL_IMAGEN_1"/>
  .......
  <img src="URL_IMAGEN_7"/>
</div>
Lo que veré es esto:



Como miden 200 pixeles de ancho, tres se muestran arriba y las otras tres, debajo; Si quisiera que se vieran filas de cuatro columnas, debería aumentar el ancho del contenedor 200 pixeles más y se acomodarían solas.

Sin otro tipo de propiedad, las imágenes se mostrarán una al lado de la otra, alineadas por su base. Si quisiera, podría alinearlas por su parte superior o centrarlas verticalmente, estableciendo la propiedad vertical-align en las etiquetas IMG; en el demo, sería:
.demo img { vertical-align: top; } o bien .demo img { vertical-align: middle; }
Otra alternativa es hacer que floten en cuyo caso, como el contenedor tiene un color de fondo, también debería dimensionar su altura caso contrario, no se vería:
.demo { height:398px; }
.demo img { float: left; } o bien .demo img { float: right; }
Las distintas variantes pueden ser probadas haciendo click en los enlaces debajo del demo.

Sea como sea y haga lo que haga, las imágenes dejarán espacios en blanco (en negro en este caso) entre ellas ya que todas tienen alturas diferentes y justamente esa es la primera característica sobresaliente de las nuevas propiedades; las columnas ajustan el contenido de tal modo de no dejar espacios entre ellos.

En el mismo ejemplo inicial, agrego esto:
.demo {
  .......
  -moz-column-count:3;
  -moz-column-gap:0;
  -webkit-column-count:3;
  -webkit-column-gap:0;
  column-count:3;
  column-gap:0;
}
Y el resultado será esto:


Sólo requerimos dos propiedades:

column-count indica la cantidad de columnas a ser mostradas; si el ancho del contenedor es escaso, se solaparán; si el ancho del contenedor es demasiado grande, quedrán espacios entre ellas
column-gap es el espacio entre los contenidos, la separación entre ellos y depende del navegador (generalmente es 1em) así que ponemos cero para controlarlo nosotros msimos

Hay propiedades extras que pueden ser agregadas:

column-width establece el ancho de esas columnas
column-rule se utiliza para establecer el tipo de borde y tiene la misma sintaxis que la propiedad border
column-rule-color es el color del borde, similar a border-color
column-rule-style es el estilo del borde, similar a border-style
column-rule-width es el tamaño del borde, similar a border-width

Más ejemplos; cinco columnas con contenidos de 100 pixeles de ancho:

123456789

Y muchas imágenes todas juntitas:

8 comentarios:

Banco de Imágenes Gratuitas  

@JMiur,
Esto me parece fantástico porque siempre he buscado algo así para acomodar mis imágenes. ¿Crees que pueda conseguir algo como lo que hay en este post? http://joseluisavilaherrera.blogspot.com/2011/02/imagenes-de-corazones-para-el-dia-del.html (Permiso ON para dejar el enlace)
Gracias y un saludo en la distancia.

Responder
Homo Inquietus  

Gracias. Ahora ya podré desarrollar algunas ideas, que tenía pendientes. De como presentar una serie de imágenes, de forma sencilla y sin mucho código. Me había leído todas las entradas que tienes sobre tratamiento de imágenes (CSS, JS ....)pero yo necesitaba algo sencillo y sabía que tarde o temprano, seguro que me darías la solución y está sí que es sencillita. Ahora a ponerla en práctica.

Responder
Adrián J. Messina  

Perfecto, utilizo muchas imágenes, me viene de 10. Te agradezco como siempre.

Un abrazo.

Responder
JMiur  

Banco de Imágenes Gratuitas:
Sí. No hay ningún problema; se verá igual porque en ese ejemplo con la ventaja de no ser necesario que todas las imágenes tengan la misma altura.

Homo Inquietus:
Es cosa de probar y ver. Recuerda que son propiedades que no funcionan en IE.

Adrián J. Messina
Gracias por el comentario.

Responder
Santiago Servente Arq. Victoria Larrazabal Arq.  

COmo es esto del CSS3 donde se baja ese programa o que es me interesa mucho esto para poder aplicarlo a mi blog es justo lo que necesito si podes chequearlo www.serventelarrazabalarquitectos.com y decime donde tengo que cambiar algo para poder hacer eso con las imagenes de mis entradas

Responder
Seba  

Muy bueno, gracias Jmiur ;)

Responder
Fherguzon Fletcher  

A mi me gustan. Excelent. ;)

Responder
JMiur  

Santiago:
El CSS no es un programa, es un pseudo-lenguaje que es parte de cualquier navegador.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR