Verhindern Sie das Umwickeln von span oder div

Ich möchte eine Gruppe von divElementen mit fester Breite in einen Container einfügen und die horizontale Bildlaufleiste anzeigen lassen. Das div/span -Elemente sollten in einer Zeile von links nach rechts in der Reihenfolge angezeigt werden, in der sie im HTML-Code angezeigt werden (im Wesentlichen entpackt).

Auf diese Weise wird die horizontale Bildlaufleiste angezeigt und kann anstelle der vertikalen Bildlaufleiste zum Lesen des Inhalts (von links nach rechts) verwendet werden.

Ich habe versucht, sie in einem Container zu schweben und dann einen white-space: nowrapStil auf den Container zu setzen, aber leider scheint es immer noch zu wickeln.

Ideen?

Es sah so aus:

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

UPDATE:
Siehe Website für Beispiele, aber sie waren falsch nicht eine andere Art und Weise zu sein - ich bin sicher , dass der Artikel ist alt though.

Versuche dies:

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

Beachten Sie, dass Sie weglassen können .slideContainer { overflow-x: scroll; }(welche Browser dies möglicherweise unterstützen oder nicht, wenn Sie dies lesen), und dass im Fenster anstelle dieses Containers eine Bildlaufleiste angezeigt wird .

Der Schlüssel hier ist display: inline-block. Dies hat heutzutage eine gute browserübergreifende Unterstützung , aber wie üblich lohnt es sich, dies in allen Zielbrowsern zu testen, um sicherzugehen.

Es funktioniert mit genau dem:

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

Ich hatte ursprünglich float : left;und das verhinderte, dass es richtig funktionierte.

Vielen Dank für die Veröffentlichung dieser Lösung.

Insbesondere wenn Sie etwas wie den Bootstrap von Twitter verwenden , white-space: nowrap;funktioniert dies nicht immer in CSS, wenn Sie einem Kind Auffüllen oder Rand hinzufügen div. Stattdessen border: 20px solid transparent;funktioniert das Hinzufügen eines äquivalenten Stils anstelle von Auffüllen / Rand konsistenter.

Wie bereits erwähnt können Sie verwenden:

overflow: scroll;

Wenn die Bildlaufleiste nur bei Bedarf angezeigt werden soll, können Sie die Option "Auto" verwenden:

overflow: auto;

Ich denke nicht, dass Sie die Eigenschaft "float" mit "overflow" verwenden sollten, aber ich müsste zuerst Ihr Beispiel ausprobieren.

Es sieht so aus, als würden Divs die Körperbreite nicht überschreiten. Sogar innerhalb eines anderen Div.

Ich habe dies getestet (allerdings ohne Doctype) und es funktioniert nicht wie gedacht.

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

Was ich denke ist, dass die inneren Divs über einen iFrame geladen werden könnten, da dies eine andere Seite ist und ihr Inhalt sehr breit sein könnte.