Platzieren von divs nebeneinander unabhängig von der Breite der übergeordneten Elemente

Question

Ich möchte divs nebeneinander platzieren. Ich kenne die Anzahl der Divs nicht, da diese dynamisch erstellt und geändert wird. Ich hätte gerne ein Eltern-Div, das eine Bildlaufleiste haben wird, falls es viele Kind-Divs gibt (und deren Breite größer ist als Eltern).

Hier ist die jsFiddle example. Also, im Grunde möchte ich all diese drei Spalten haben, nebeneinander und mit Bildlaufleiste auf der Unterseite des Elternteils div.

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

hinzufügen white-space:nowrap zu Ihren Eltern div.

FIDDLE

Answer 2

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

Verwendung float:left;

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

Answer 3

Verwendung width:auto;

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

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

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

Answer 4

Sie müssten einen Inhalt div für die Rolle verwenden und dann ein Wrapper für die Spalten, die Breite der Umhüllung Einstellung alle 3 Ihrer Spalten passen (150px in Ihrem Beispiel).

Die Spaltenstruktur wird durch schwebende divs links gemacht, aber sie wird auf die Breite des übergeordneten Containers schweben, in diesem Fall ist der übergeordnete Container nur 100px, also müssen wir einen Wrapper hinzufügen, damit sie hineinpassen.

Wenn Sie auch einen vertikalen Bildlauf wünschen, müssen Sie eine Höhe für Ihren Container festlegen.

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

Versuchen Sie, die folgenden JS Geige

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

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