muchas imagenes en una sola fila

[monoswim]

Hola gente, tengo algo como esto...

Código:

<div style="width:500px; height:100ox; overflow: auto;">
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
    <img src="1.jpg" height="100" width="100" />
</div>

Pero las filas no me quedan todas en una sola fila, cuando se llena la fila hace un salto y sigue debajo generándome varias líneas...

Hay alguna forma fácil de solucionarlo, fácil y que funcione bien en todos los navegadores ;)

Saludos y gracias de antemano...
PD: SOlamente pude solucionarlo con una tabla HTML...

[Calizman]

Saludos!!

Intenta agregar al CSS esto:

#div img { display: inline; float:left; }

Con eso seguro se soluciona!

Hasta luego!!

[monoswim]

tampoco

<style>
div.galery {height:108px; width:500px; overflow:auto; padding:5px;}
div.galery img { display:inline; float: left;}
</style>
<div class="galery">

<img src="bariloche/thumbs/1.jpg" width="140" height="91" />
<img src="bariloche/thumbs/2.jpg" width="140" height="91" />
<img src="bariloche/thumbs/3.jpg" width="140" height="91" />
<img src="bariloche/thumbs/4.jpg" width="140" height="91" />
<img src="bariloche/thumbs/5.jpg" width="140" height="91" />
<img src="bariloche/thumbs/6.jpg" width="140" height="91" />
<img src="bariloche/thumbs/7.jpg" width="140" height="91" />
<img src="bariloche/thumbs/8.jpg" width="140" height="91" />
<img src="bariloche/thumbs/9.jpg" width="140" height="91" />

</div>

Saludos

[Calizman]

Y si quitas div? y solo dejas .galery img?

EDITO: Ups!! Creo que me confundi, cambia display:inline; por display: block;

[Fernando_Perea]

Pero tienes una división de 500px en donde vas a meter 9 imaǵenes de 100px

9 x 100 = 900; 900 > 500

Si el contenido es más ancho que el contenedor, entonces... sucede lo que te sucede,

Debes ampliar tu división a mínimo900px, eso es todo.

Saludos

[caricatos]

Hola Esteban :

Debes darle al contenedor de las imágenes una anchura mayor o igual a la suma de sus anchuras más la suma de sus márgenes y bordes....

Y según veo tienes 8 imágenes de 100 pixeles de anchura en un contenedor de sólo 500 pixeles... y un añadido es que el overflow para esa anchura supongo que iría mejor scroll (aunque creo que auto valdría)

Después he visto que tienes también otras imágenes (el otro post) aún más anchas...

Saludos

[monoswim]

Justamente la idea es que el contenedor sea más chico y que tenga el scroll horizontal...por eso el overflow ;)

Ya proble con inline, block y todo pero no funca, así que lo dejo así:

<style>
div.galery {height:110px; width:500px; overflow:auto; padding:5px;}
</style>
<div class="galery">
<table><tr>
<td><img src="bariloche/thumbs/1.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/2.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/3.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/4.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/5.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/6.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/7.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/8.jpg" width="140" height="91" /></td>
<td><img src="bariloche/thumbs/9.jpg" width="140" height="91" /></td>
</tr></table>
</div>

Saludos y gracias !

[xurxinho]

una solución fácil si quieres forzar un scroll horizontal sin que salte las imágenes es crear un iframe en la página y darle a este un ancho muy alto así sale el scroll dichoso.