CSS: muestra solo la barra de desplazamiento horizontal para un ancho y una altura fijos div

Obtuve un div que es de ancho y alto fijos:

 #containersimg
 {
    width: 900px;
    height: 135px;
 }

Y tengo muchas imágenes adentro, con un ancho de 90px y un alto de 120px. Así que quiero tener todas mis imágenes en una fila y mostrar solo la barra de desplazamiento horizontal para desplazarse por las imágenes.

Necesito hacer que esto funcione tanto en FF como en IE8 y superior. Probé overflow-x y overflow-y pero no ayudé.

¿¿Alguna idea?? Hope puede obtener ayuda aquí ... gracias ...

preguntado el 08 de noviembre de 11 a las 10:11

3 Respuestas

Necesita un div de envoltura dentro de su contenedor de desplazamiento para asegurarse de que no estén restringidos por el ancho y luego establecer overflow-x: scroll en el contenedor. Me he burlado de un violín rápido para demostrarlo. http://jsfiddle.net/vUEYG/

respondido 08 nov., 11:14

+1 Bien, pero creo que es mejor dar .square display:inline-block y quitar float:left. Entonces da .wrapper white-space:nowrap y quitar el width de eso. De esta manera, no está limitado a un ancho de 500px para la envoltura. Mira aquí: jsfiddle.net/WbVp3 - Bazzz

En realidad, eso tendría más sentido. Actualicé el violín con sus sugerencias; también cambié los divs cuadrados a tramos para asegurarme de que IE los maneje correctamente con inline-block. jsfiddle.net/vUEYG/2 - ensalza

hola muchas gracias. Pero debido a algunas razones, no pude cambiar la construcción html ... ¿Alguna idea de cómo hacerlo sin agregar div? Gracias.. - shennyL

Es posible que pueda perder el div contenedor ahora en realidad y simplemente configurar white-space:nowrap en ese jsfiddle.net/vUEYG/3 - ensalza

Es genial que logremos encontrar la solución perfecta juntos :) - Bazzz

Dale una oportunidad :)

-ms-overflow-x: hidden;

Tomado de este gran recurso Elemento div CSS: ¿cómo mostrar solo las barras de desplazamiento horizontales?

contestado el 23 de mayo de 17 a las 15:05

¿Puede poner su código en un violín JS, por favor :) Eso nos permitirá ayudar mejor :) - Graeme Leighfield

Hola, aquí tienes: jsfiddle.net/yenni104/rTjmc Obtuve una solución de la respuesta publicada anteriormente, ¡aún así muchas gracias! - shennyL

puedes agregar el primer desbordamiento: auto

#containersimg
 {
    width: 900px;
    height: 135px;
overflow:auto;
overflow-x:hidden;


 }

puede ayudarle a

respondido 08 nov., 11:14

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.