Développer la division horizontalement et non verticalement

Question

J'ai un div avec

display:inline-block;
postion:relative;

à l'intérieur d'un div avec

display:block;
width:348px;
overflow:hidden;

Lorsque le contenu de la division intérieure déborde, je veux qu'il s'étende. horizontally pas vertically . Le contenu de la division intérieure est constitué de vignettes de photos.

Answer 1

Il vous suffit de définir white-space: nowrap sur l'un ou l'autre des divs (la propriété est héritée). (Source)

Sidenote : La div intérieure n'est pas nécessaire pour que cela fonctionne.

Démonstration : JSFiddle

HTML

<div class="container">
    <div>
        <!-- Thumbnails -->
    </div>
</div>

CSS

.container {
    display: block;
    width: 348px;
    overflow: hidden;
    white-space: nowrap;
}

.container div {
    position: relative;
    display: inline-block;
}

Answer 2

Ray Z !

Le débordement est important. Donc, afin d'écrire votre css comme juste

overflow:"hidden"

vous devez utiliser

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

Answer 3

Définir la largeur et l'overflow-x comme auto pour la div intérieure

    <div id = "outer">
     <div id = "inner"></div>
    </div>

#outer{
width: 400px;
height: 300px;
border: red thin dotted;
}

#inner{
margin: 15px;
height: 280px;
width: auto;
border: green thin solid;
overflow-x: auto;
}

Voici le violon http://jsfiddle.net/jgrgb/