HTML Divs, colonnes, barre de défilement horizontale

Question

J'essaie d'afficher plusieurs blocs de données dans des colonnes les unes à côté des autres. J'ai mis le conteneur à afficher en ligne, ce qui fonctionne très bien si les colonnes sont relativement minces. Dès qu'une colonne dépasse la longueur de l'écran horizontal, les autres colonnes sont ajoutées au bas.

Ma question est la suivante: Comment afficher les divs de colonnes en ligne qui sont placées horizontalement, avec une barre de défilement horizontale?

Remarque: Je veux en fait la barre de défilement; Je veux les éléments côte à côte.

<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; 

} 

Merci,
Michael

Answer 1

Nous essayons de garder le navigateur de le faire est le travail normal: choses layouting dans un manière qu'il s'intègre dans la taille de la fenêtre en cours. Peu importe si le contenu est en bloc ou en ligne, le navigateur essaie toujours de l'insérer dans la fenêtre.

Vous pouvez donner votre conteneur une largeur fixe pour assurer suffisamment d'espace pour toutes les colonnes:

.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

Je pense que le chaos est correct, il pourrait bien être overflow-x: scroll; au lieu