Empêcher l'enroulement de span ou div

J'aimerais mettre un groupe d' divéléments de largeur fixe dans un conteneur et faire apparaître la barre de défilement horizontale. Les éléments div/ spandoivent apparaître dans une ligne, de gauche à droite dans l'ordre dans lequel ils apparaissent dans le HTML (essentiellement déroulés).

De cette façon, la barre de défilement horizontale apparaîtra et peut être utilisée à la place de la barre de défilement verticale pour lire le contenu (de gauche à droite).

J'ai essayé de les faire flotter dans un conteneur, puis de mettre un white-space: nowrapstyle sur le conteneur, mais hélas, il semble toujours s'envelopper.

Des idées?

Cela ressemblait à ceci:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    width: 800px;
    float: left;
    display: inline;
}

<div class="slideContainer">
    <div class="slide">Some content</div>
    <div class="slide">More content</div>
    <div class="slide">Even More content!</div>
</div>

MISE À JOUR:
Voir le site pour des exemples, mais ils avaient tort de ne pas être une autre façon - je suis sûr que l'article est vieux.

Essaye ça:

.slideContainer {
    overflow-x: scroll;
    white-space: nowrap;
}
.slide {
    display: inline-block;
    width: 600px;
    white-space: normal;
}

<div class="slideContainer">
    <span class="slide">Some content</span>
    <span class="slide">More content. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
    <span class="slide">Even more content!</span>
</div>

Notez que vous pouvez omettre .slideContainer { overflow-x: scroll; }(que les navigateurs peuvent ou non prendre en charge lorsque vous lisez ceci), et vous obtiendrez une barre de défilement sur la fenêtre au lieu de sur ce conteneur.

La clé ici est display: inline-block. Cela a un support multi-navigateurs décent de nos jours, mais comme d'habitude, cela vaut la peine d'être testé dans tous les navigateurs cibles pour être sûr.

Cela fonctionne avec juste ceci:

.slideContainer {
    white-space: nowrap;
}
.slide { 
    display: inline-block;
    width: 600px;
    white-space: normal;
}

J'avais à l'origine float : left;et cela l'a empêché de fonctionner correctement.

Merci d'avoir publié cette solution.

En particulier, lorsque vous utilisez quelque chose comme Bootstrap de Twitter , white-space: nowrap;ne fonctionne pas toujours en CSS lors de l'application d'un remplissage ou d'une marge à un enfant div. Au lieu de cela, cependant, ajouter un border: 20px solid transparent;style équivalent à la place du remplissage / marge fonctionne de manière plus cohérente.

Comme mentionné, vous pouvez utiliser:

overflow: scroll;

Si vous souhaitez que la barre de défilement n'apparaisse que lorsque cela est nécessaire, vous pouvez utiliser l'option "auto":

overflow: auto;

Je ne pense pas que vous devriez utiliser la propriété "float" avec "overflow", mais je devrais d'abord essayer votre exemple.

On dirait que les divs ne sortiront pas de la largeur de leur corps. Même dans une autre division.

J'ai jeté ceci pour tester (sans doctype cependant) et cela ne fonctionne pas comme une pensée.

.slideContainer {
    overflow-x: scroll;
}
.slide {
    float: left;
}

<div class="slideContainer">
    <div class="slide" style="background: #f00">Some content Some content Some content Some content Some content Some content</div>
    <div class="slide" style="background: #ff0">More content More content More content More content More content More content</div>
    <div class="slide" style="background: #f0f">Even More content! Even More content! Even More content!</div>
</div>

Ce que je pense, c'est que les div internes pourraient être chargés via un iFrame, car c'est une autre page et son contenu peut être très large.