ป้องกันการห่อของช่วงหรือ div

ฉันต้องการที่จะนำกลุ่มของ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;และนั่นทำให้มันทำงานไม่ถูกต้อง

ขอขอบคุณที่โพสต์โซลูชันนี้

โดยเฉพาะอย่างยิ่งเมื่อมีการใช้สิ่งที่ต้องการของ Twitter Bootstrap , white-space: nowrap;ไม่เคยทำงานใน CSS divเมื่อมีการใช้ช่องว่างหรือคิดเป็นอัตราการเด็ก อย่างไรก็ตามการเพิ่มborder: 20px solid transparent;สไตล์ที่เทียบเท่าแทนที่ padding / margin จะทำงานได้อย่างต่อเนื่อง

ดังกล่าวคุณสามารถใช้:

overflow: scroll;

หากคุณต้องการให้แถบเลื่อนปรากฏเมื่อจำเป็นเท่านั้นคุณสามารถใช้ตัวเลือก "อัตโนมัติ":

overflow: auto;

ฉันไม่คิดว่าคุณควรใช้คุณสมบัติ "ลอย" กับ "ล้น" แต่ฉันต้องลองตัวอย่างของคุณก่อน

ดูเหมือนว่า divs จะไม่ออกไปนอกความกว้างของร่างกาย แม้แต่ภายในกองอื่น

ฉันขว้างมันขึ้นมาเพื่อทดสอบ (โดยไม่มี doctype ว่า) และมันไม่ทำงานอย่างที่คิด

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

สิ่งที่ฉันคิดคือ div ของด้านในสามารถโหลดผ่าน iFrame เนื่องจากเป็นอีกหน้าหนึ่งและเนื้อหาอาจกว้างมาก