Запобігайте загортанню прольоту або дива

Я хотів би помістити групу divелементів фіксованої ширини в контейнер і мати горизонтальну смугу прокрутки. В div/ spanелементи повинні з'явитися в рядку, зліва направо в порядку їх появи в HTML ( по суті розгорнутому).

Таким чином горизонтальна смуга прокрутки з’явиться і може бути використана замість вертикальної смуги прокрутки для читання вмісту (зліва направо).

Я спробував плавати їх у контейнері, а потім класти white-space: nowrapстиль на контейнер, але на жаль, він все ще здається загортати.

Ідеї?

Виглядало так:

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

ОНОВЛЕННЯ:
Ознайомтесь із прикладами на сайті , але вони помилялися, якщо це не інший спосіб - я впевнений, що стаття стара.

Спробуйте це:

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

Зауважте, що ви можете пропустити .slideContainer { overflow-x: scroll; }(які браузери можуть, а можуть не підтримувати читаючи це), і ви отримаєте смугу прокрутки на вікні замість цього контейнера.

Ключовим тут є display: inline-block. На сьогоднішній день це пристойна підтримка крос-браузерів , але, як завжди, варто перевірити їх у всіх цільових браузерах.

Це працює саме з цим:

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

Я спочатку мав float : left; і це заважало нормально працювати.

Дякуємо, що опублікували це рішення.

Особливо, коли ви використовуєте щось на зразок завантажувальногоwhite-space: nowrap; пристрою Twitter , не завжди працює в CSS, коли застосовується до дитини накладки або поля div. Натомість, додавання еквівалентного border: 20px solid transparent;стилю замість прокладки / запасу працює більш послідовно.

Як згадувалося, ви можете використовувати:

overflow: scroll;

Якщо ви хочете, щоб панель прокрутки з'являлася лише при необхідності, ви можете скористатися опцією "auto":

overflow: auto;

Я не думаю, що вам слід використовувати властивість "float" з "overflow", але я повинен спершу спробувати ваш приклад.

Схоже, диви не вийдуть за межі ширини тіла. Навіть у межах іншого діву.

Я кинув це на тестування (хоча й доктіп), але це не працює як думка.

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

Я думаю, що внутрішній діви можна завантажити через iFrame, оскільки це інша сторінка, і її зміст може бути дуже широким.