Ngăn chặn khoảng hoặc div

Tôi muốn đặt một nhóm các divyếu tố có chiều rộng cố định vào một thùng chứa và xuất hiện thanh cuộn ngang. Các phần tử div/ spansẽ xuất hiện trong một dòng, từ trái sang phải theo thứ tự chúng xuất hiện trong HTML (về cơ bản là không được bao bọc).

Bằng cách này, thanh cuộn ngang sẽ xuất hiện và có thể được sử dụng thay vì thanh cuộn dọc để đọc qua nội dung (trái sang phải).

Tôi đã thử thả chúng vào một thùng chứa và sau đó đặt một white-space: nowrapkiểu trên thùng chứa, nhưng than ôi, nó dường như vẫn còn bọc.

Ý tưởng?

Nó trông như thế này:

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

CẬP NHẬT:
Xem trang web để biết ví dụ, nhưng họ đã sai về việc không phải là một cách khác - mặc dù tôi chắc chắn bài viết đã cũ.

Thử cái này:

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

Lưu ý rằng bạn có thể bỏ qua .slideContainer { overflow-x: scroll; }( trình duyệt nào có thể hỗ trợ hoặc không hỗ trợ khi bạn đọc phần này) và bạn sẽ nhận được một thanh cuộn trên cửa sổ thay vì trên hộp đựng này.

Chìa khóa ở đây là display: inline-block. Điều này có hỗ trợ trình duyệt chéo khá tốt hiện nay, nhưng như thường lệ, nó đáng để thử nghiệm trong tất cả các trình duyệt mục tiêu để chắc chắn.

Nó hoạt động chỉ với điều này:

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

Tôi đã có ban đầu float : left;và điều đó ngăn nó hoạt động chính xác.

Cảm ơn đã đăng giải pháp này.

Đặc biệt, khi sử dụng một cái gì đó như Bootstrap của Twitter , white-space: nowrap;không phải lúc nào cũng hoạt động trong CSS khi áp dụng phần đệm hoặc lề cho trẻ div. Tuy nhiên, thay vào đó, việc thêm một border: 20px solid transparent;kiểu tương đương thay cho phần đệm / lề hoạt động ổn định hơn.

Như đã đề cập, bạn có thể sử dụng:

overflow: scroll;

Nếu bạn chỉ muốn thanh cuộn xuất hiện khi cần thiết, bạn có thể sử dụng tùy chọn "tự động":

overflow: auto;

Tôi không nghĩ bạn nên sử dụng thuộc tính "float" với "tràn", nhưng trước tiên tôi phải thử ví dụ của bạn.

Có vẻ như các div sẽ không đi ra ngoài chiều rộng cơ thể của họ. Ngay cả trong một div khác.

Tôi đã ném nó lên để kiểm tra (mặc dù không có tài liệu) và nó không hoạt động như suy nghĩ.

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

Điều tôi đang nghĩ là các div bên trong có thể được tải thông qua iFrame, vì đó là một trang khác và nội dung của nó có thể rất rộng.