Scorrimento orizzontale con overflow-x

Mi chiedevo se non c'è ancora un buon modo per ottenere un div di allungare e scorrere orizzontalmente, in base alle immagini all'interno. Dopo tutto, è il 2011 ora!Scorrimento orizzontale con overflow-x

Il mega-width fa il trucco, ma lascia uno mega-space vuoto se non pieno di immagini.
Se riempito troppo, le immagini non vengono visualizzate. Lo stesso per il jQuery. La situazione di seguito è la migliore che posso fare dopo ore di utilizzo di Google, ma non è abbastanza affidabile.

Grazie per il vostro tempo.

* { 
    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>

fonte

2011-01-04 ams

È facile. display:inline-block sulle immagini e white-space:nowrap sul genitore.

Modifica: Ho dimenticato che le immagini sono di default inline, comunque :) Ciò significa che lo white-space:nowrap è tutto ciò che serve.

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

Demo online:http://jsfiddle.net/U4RsQ/2/

fonte

2011-01-04 04:20:18

+1, @SIME, ma per quanto riguarda la compatibilità cross-browser? – Starx

@Starx Non ho versioni precedenti di IE, ma secondo http://en.wikipedia.org/wiki/Comparison_of_layout_engines_(Cascading_Style_Sheets%29 IE6 supporta white-space: nowrap. Non so di overflow-x e overflow-y, tu (in IE6, ovverosia) –

Il tuo primo esempio è stato sufficiente per farmi sorridere – ams

Vedi Make CSS Div Width Equal To Contents, credo, per lo stretching. Quindi applica uno max-width per limitare la larghezza a non essere super-enorme. (E overflow: scroll se necessario.)

fonte

2011-01-04 04:16:22

Grazie tutto, looooove stackoverflow così tanto – ams

Che cosa ha funzionato per me con IE8:

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

È possibile garantire la vostra pagina viene visualizzata con l'ultima resa includendo il seguente meta tag nella sezione della testa della tua pagina:

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

fonte

2011-01-05 13:51:29 ams

Scorrimento orizzontale con overflow-x

risposta

Problemi correlati