desplazamiento horizontal con desbordamiento-x

Me preguntaba si todavía no hay una buena manera de obtener un div para estirar y desplazarse horizontalmente, de acuerdo con las imágenes en el interior. ¡Después de todo, es 2011 ahora!desplazamiento horizontal con desbordamiento-x

El mega-width hace el truco, pero deja un mega-space vacío si no está lleno de imágenes.
Si se llena demasiado, las imágenes no se muestran. Lo mismo para jQuery. La siguiente situación es lo mejor que puedo hacer después de horas de búsqueda en Google, pero no es lo suficientemente confiable.

Gracias por su tiempo.

* { 
    margin:0; 
    padding:0; 
} 

#one { 
    width: 200px;  
    height: 250px; 
    overflow-x: auto; 
    overflow-y: hidden; 
} 

#two { 
    width: 10000em; 
} 

#two img { 
    float: left; 
} 

$(document).ready(function() { 
    var total = 0; 
    $(".calc").each(function() { 
    total += $(this).outerWidth(true); 
    }); 
    $("#two").css('width', total); 
    alert(total); 
});

<div id="one"> 
    <div id="two"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    <img src="images/testimage3.jpg" width="480" height="192" class="calc"> 
    </div> 
</div>

Fuente

2011-01-04 ams

Es fácil. display:inline-block en las imágenes y white-space:nowrap en el elemento principal.

Edit: Olvidé que las imágenes son por defecto en línea, de todos modos :) Eso significa que white-space:nowrap es todo lo que necesita.

div { 
    overflow-x:scroll; 
    overflow-y:hidden; 
    white-space:nowrap; 
}

Demostración en directo:http://jsfiddle.net/U4RsQ/2/

Fuente

2011-01-04 04:20:18

+1, @SIME, pero ¿qué pasa con la compatibilidad entre navegadores? – Starx

@Starx No tengo versiones anteriores de IE, pero de acuerdo con http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets%29 IE6 admite espacio en blanco: nowrap. No sé sobre overflow-x y desbordamiento-y, tú (en IE6, eso es). –

Tu primer ejemplo fue suficiente para hacerme sonreír. – ams

Ver Make CSS Div Width Equal To Contents, creo, para el estiramiento. A continuación, aplique un max-width para restringir el ancho para que no sea súper grande. (Y overflow: scroll si es necesario.)

Fuente

2011-01-04 04:16:22

Gracias a todos, looooove stackoverflow tanto – ams

Lo que funcionó para mí con IE8:

msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

Puede asegurarse de que sus páginas aparecen con la última representación mediante la inclusión de la siguiente meta etiqueta en la sección de la cabeza de su página:

<meta http-equiv="X-UA-Compatible" content="IE=9" />

Fuente

2011-01-05 13:51:29 ams

desplazamiento horizontal con desbordamiento-x

Respuesta

Cuestiones relacionadas