Place divs obok siebie, niezależnie od szerokości rodzica

Question

Chcę umieścić div obok siebie. Nie znam liczby div, ponieważ jest to dynamicznie tworzone i zmieniane. Chciałbym mieć jeden element nadrzędny div, który będzie miał pasek przewijania w przypadku, gdy istnieje wiele elementów div dziecka (i ich szerokość jest większa od elementu nadrzędnego).

Oto jsFiddle example. Tak więc, w zasadzie chciałbym mieć wszystkie te trzy kolumny, obok siebie i z paskiem przewijania na spodzie div rodzica.

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

white-space:nowrap Dodaj do div.

FIDDLE

Answer 2

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

użycie float:left;

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

Answer 3

użycie width:auto;

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

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

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

Answer 4

Trzeba by użyć div zawartości do przewijania, a następnie owinięcie na kolumnach, dostosowując szerokość owijki aby zmieścić wszystkie 3 swoich kolumnach (150px w twoim przykładzie).

Konstrukcja kolumny wykonana jest przez pływającą lewą część div, ale będzie unosząca się na szerokość pojemnika nadrzędnego, w tym przypadku kontener macierzysty ma tylko 100 pikseli, więc musimy dodać opakowanie, aby zmieściło się w środku.

Jeśli chcesz również przewijać w pionie, musisz ustawić wysokość pojemnika.

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

Spróbuj następującą JS skrzypce

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

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