Posiziona le div uno vicino all'altro a prescindere dalla larghezza genitore

Question

Voglio posizionare le div uno vicino all'altro. Non conosco il numero di div, poiché questo viene creato e modificato dinamicamente. Mi piacerebbe avere un div genitore che avrà la barra di scorrimento nel caso in cui ci siano molte div child (e la loro larghezza è maggiore di genitore).

Ecco il jsFiddle example. Quindi, fondamentalmente mi piacerebbe avere tutte queste tre colonne, una accanto all'altra e con la barra di scorrimento nella parte inferiore della divisione genitore.

HTML:

<div class="content"> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
    <div class="column">Column</div> 
</div> 

CSS:

content { 
    width: 100px; 
    background- color: #355E95; 
    overflow: visible; 
} 

.column { 
    width: 50px; 
    display: inline-block; 
} 

Answer 1

Aggiungi white-space:nowrap al div genitore.

FIDDLE

Answer 2

Fiddle: http://jsfiddle.net/bdssw/

uso float:left;

.column { 
    width: 50px; 
    display: inline-block; 
    float:left; 
} 

Answer 3

uso width:auto;

.content { 
    width: auto; 
    background-color: #355E95; 
    overflow:scrolling; 
    position:fixed; 
} 

.column { 
    width: 50px; 
    float:left; 
} 

http://jsfiddle.net/XqSJG/6/

Answer 4

Lei avrebbe bisogno di utilizzare un div contenuto per il libro e poi un wrapper per le colonne, regolare la larghezza dell'involucro per adattarsi a tutti e 3 le colonne (150 px nel tuo esempio).

La struttura della colonna è composta da una virgola flottante sinistra, ma fluttua alla larghezza del contenitore genitore, in questo caso il contenitore genitore è solo di 100 px, quindi è necessario aggiungere un wrapper per adattarlo all'interno.

Se si desidera anche uno scorrimento verticale, è necessario impostare un'altezza per il contenitore.

Jsfiddle: http://jsfiddle.net/tYnH3/

css:

.content { 
    width: 100px; 
    background-color: #355E95; 
    overflow: auto; 
} 

.content-wrapper { 
    width: 150px; 
} 

.column { 
    width: 50px; 
    float: left; 
} 

html:

<div class="content"> 
    <div class="content-wrapper"> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
     <div class="column"> 
      Column   
     </div> 
    </div> 
</div> 

Answer 5

Provate il seguente JS violino

http://jsfiddle.net/jT6SW/1/

#wrapper 
{ 
float: left; 
height: 150px; 
width: 250px; 
margin: auto; 
border: 1px black solid; 
overflow-y: hidden; 
overflow-x: scroll; 
}