sábado, 20 de septiembre de 2014

Crecimiento horizontal de un div con scroll HTML y CSS

Hace unos días estaba realizando un seleccionador de imágenes simple, usando un contenedor. Buscando y buscando, dí con las propiedades CSS para realizar tal cometido.

El resultado fue algo similar a lo siguiente:

Crecimiento horizontal del div con scroll funcionando.
Para lograrlo, primero es necesario crear un contenedor padre, y el contenido respectivo.
Por el momento, se verá de la siguiente manera:

Contedor padre con muchos contenedores hijos mostrando la misma imagen, sin configuración CSS.

Para que esto tome forma, lo primero es configurar el CSS del contenedor padre con overflow-x en scroll para que el div cuente con una barra horizontal para poder mostrar el contenido y la propiedad white-space configurado en nowrap para que no existan saltos de lineas automáticos en caso de desbordar el tamaño del contenedor.

Finalmente, es necesario configurar los contenedores dentro del contenedor padre para que se muestren uno al lado del otro. Para esto, es necesario configurar la propiedad display con el valor inline. La opción inline-block también funciona, por lo que se puede usar si es necesario trabajar con el contenido hijo en forma de bloques.

Puedes ver la demostración, haciendo click aquí.

Links:

No hay comentarios:

Publicar un comentario