Css di scorrimento orizzontale?

Question

Desidero avere uno <div> con ID che abbia lo scorrimento orizzontale, ma il problema è che deve essere reattivo, non con larghezza fissa.

html, body {margin: 0; padding: 0;} 

#myWorkContent{ 
    width:530px; 
    height:210px; 
    border: 13px solid #bed5cd; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

#myWorkContent a { 
    display: inline-block; 
    vertical-align: middle; 
} 

#myWorkContent img {border: 0;} 

<div id="myWorkContent"> 
    <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a> 
    <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a> 
    <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a> 
    <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a> 
    <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a> 
    <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a> 
</div><!-- end myWorkContent --> 

Grazie a http://jsfiddle.net/clairesuzy/FPBWr/

Il problema è con questo 530px. Mi piacerebbe usare il 100% invece. Ma poi ho la pagina di scorrimento e lo scorrimento del DIV va bene, non riesco a capirlo, qualche idea?

Qui è l'articolo in serbo sulla soluzione http://www.blog.play2web.com/index.php?id=18

Answer 1

Basta impostare la larghezza per l'auto:

#myWorkContent{ 
    width: auto; 
    height:210px; 
    border: 13px solid #bed5cd; 
    overflow-x: scroll; 
    overflow-y: hidden; 
    white-space: nowrap; 
} 

questo modo il tuo div può essere il più largo possibile ble, quindi puoi aggiungere quante più immagini di gattino possibile 3

La larghezza del tuo div si espanderà in base agli elementi figli contenuti.

jsFiddle

Answer 2

Basta fare in modo di aggiungere al vostro box-sizing:border-box;#myWorkContent.

http://jsfiddle.net/FPBWr/160/

Answer 3

utilizzo max-width, invece di larghezza

max-width:530px;

demo: http://jsfiddle.net/FPBWr/161/

Answer 4

ho pensato in questo modo:

* { padding: 0; margin: 0 } 
body { height: 100%; white-space: nowrap } 
html { height: 100% } 

.red { background: red } 
.blue { background: blue } 
.yellow { background: yellow } 

.header { width: 100%; height: 10%; position: fixed } 
.wrapper { width: 1000%; height: 100%; background: green } 
.page { width: 10%; height: 100%; float: left } 

<div class="header red"></div> 
<div class="wrapper"> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
    <div class="page yellow"></div> 
    <div class="page blue"></div> 
</div> 

ho l'involucro al 1000% e dieci pagine con il 10% ciascuna. Ho impostato il mio per avere ancora "pagine" con ognuna delle quali è il 100% della finestra (con codice colore). Puoi fare otto pagine con un wrapper dell'800%. Immagino tu possa lasciare fuori i colori e avere sulla pagina continua. Ho anche impostato un'intestazione fissa, ma non è necessario. Spero che questo ti aiuti.

Answer 5

Sotto ha funzionato per me.

Altezza & L'altezza è presa per mostrare che, se si 2 di questi bambini, scorrerà orizzontalmente, poiché l'altezza del bambino è maggiore dell'altezza dello scorrimento genitore verticalmente.

Parent CSS:

.divParentClass { 
    width: 200px; 
    height: 100px; 
    overflow: scroll; 
    white-space: nowrap; 
} 

bambini CSS:

.divChildClass { 
    width: 110px; 
    height: 200px; 
    display: inline-block; 
} 

Per scorrere solo in senso orizzontale:

overflow-x: scroll; 
overflow-y: hidden; 

Per scorrere solo verticalmente:

overflow-x: hidden; 
overflow-y: scroll;