HTML-Divs, Spalten, horizontale Bildlaufleiste

Question

Ich versuche, mehrere Datenblöcke in Spalten nebeneinander anzuzeigen. Ich habe den Container so eingestellt, dass er inline angezeigt wird, was sehr gut funktioniert, wenn die Spalten relativ dünn sind. Sobald eine Spalte die horizontale Bildschirmlänge überschreitet, werden die anderen Spalten an den unteren Rand angehängt.

Meine Frage ist: Wie kann Inline-Spalte divs angezeigt werden, die horizontal mit einer horizontalen Bildlaufleiste platziert sind?

Hinweis: Ich möchte eigentlich die Bildlaufleiste; Ich möchte die Elemente nebeneinander haben.

<div class="container"> 
    <div class="child" id="1">Stuff</div> 
    <div class="child" id="2">Stuff</div> 
</div> 

--------- 

.child { 
    /*float:left; 
    margin-right:5em;*/ 
    display:inline; 
} 
.container { 
    display:inline; 
    overflow: scroll-x; 
    white-space: nowrap; 

} 

Danke,
Michael

Answer 1

Wir versuchen, aus dem Browser zu halten es tun normalen Job: Layouten Sachen in einem solchen So passt es in die aktuelle Fenstergröße. Es spielt keine Rolle, ob es sich um Block- oder Inline-Dateien handelt, dennoch versucht der Browser, sie in das Fenster einzupassen.

Sie können Ihre Container eine feste Breite geben genügend Platz für alle Spalten zu gewährleisten:

.child { 
    margin-right:50px; 
    float:left; 
    width: 100px; 
    border: 1px black solid; 

} 

.container { 
    width: 1520px; 
    overflow: scroll-x; 
    border: 1px red solid; 
} 

example page

screenshot of the example page http://www.users.fh-salzburg.ac.at/~bjelline//css-layout/sidebyside.png

Answer 2

Ich denke, das Chaos richtig ist es stattdessen

nur overflow-x: scroll; sein kann