วิธีทำให้ DIV ไม่พันกัน?

ฉันต้องการสร้างสไตล์ DIV ของคอนเทนเนอร์ที่มีหลาย DIV อื่น ๆ มีการถามว่า DIV เหล่านี้จะไม่ห่อหากหน้าต่างเบราว์เซอร์มีการปรับขนาดให้แคบ

ฉันพยายามทำให้มันทำงานเหมือนด้านล่าง

<style>
   .container
   {
      min-width: 3000px;
      overflow: hidden;
   }
   .slide
   {
      float: left;
   }
</style>
<div class="container">
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
   <div class="slide">something</div>
</div>

วิธีนี้ใช้ได้ผลในกรณีส่วนใหญ่ อย่างไรก็ตามในบางกรณีการแสดงผลไม่ถูกต้อง ฉันพบว่าคอนเทนเนอร์ DIV เปลี่ยนเป็นความกว้าง 3000px ใน RTL ของ IE7; และมันก็ยุ่งเหยิงไปหมด

มีวิธีอื่นในการทำ DIV ของคอนเทนเนอร์หรือไม่?

ลองใช้white-space: nowrap;ในรูปแบบภาชนะ (แทนoverflow: hidden;)

หากฉันไม่ต้องการกำหนดความกว้างน้อยที่สุดเพราะฉันไม่ทราบจำนวนองค์ประกอบสิ่งเดียวที่ทำงานกับฉันคือ:

display: inline-block;
white-space: nowrap;

แต่ใน Chrome และ Safari เท่านั้น: /

การทำงานต่อไปนี้สำหรับฉันโดยไม่ต้องลอย (ฉันแก้ไขตัวอย่างของคุณเพียงเล็กน้อยสำหรับเอฟเฟ็กต์ภาพ):

.container
{
    white-space: nowrap; /*Prevents Wrapping*/
    
    width: 300px;
    height: 120px;
    overflow-x: scroll;
    overflow-y: hidden;
}
.slide
{
    display: inline-block; /*Display inline and maintain block characteristics.*/
    vertical-align: top; /*Makes sure all the divs are correctly aligned.*/
    white-space: normal; /*Prevents child elements from inheriting nowrap.*/
    
    width: 100px;
    height: 100px;
    background-color: red;
    margin: 5px;
}

<div class="container">
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
   <div class="slide">something something something</div>
</div>

divs อาจถูกคั่นด้วยช่องว่าง หากคุณไม่ต้องการสิ่งนี้ใช้margin-right: -4px;แทน( margin: 5px;สำหรับ.slideมันน่าเกลียด แต่เป็นปัญหาที่ยุ่งยากในการจัดการ )

คอมโบที่คุณต้องการคือ

white-space: nowrap

บนผู้ปกครองและ

display: inline-block; // or inline

บนเด็ก ๆ

สิ่งนี้ใช้ได้กับฉัน:

.container {
  display: inline-flex;
}

.slide {
  float: left;
}

<div class="container">
  <div class="slide">something1</div>
  <div class="slide">something2</div>
  <div class="slide">something3</div>
  <div class="slide">something4</div>
</div>

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

overflow: hiddenควรให้พฤติกรรมที่ถูกต้องแก่คุณ ฉันเดาว่าจะRTLเป็น messed up เพราะคุณมีfloat: leftในห่อหุ้มdivs

นอกจากข้อผิดพลาดนั้นคุณมีพฤติกรรมที่เหมาะสม

ลองใช้width: 3000px;สำหรับกรณีของ IE

ไม่มีข้อใดถูกเลยสำหรับฉัน

ในกรณีของฉันฉันจำเป็นต้องเพิ่มสิ่งต่อไปนี้ในการควบคุมผู้ใช้ที่ฉันสร้างขึ้น:

display:inline-block;

min-widthคุณสมบัติทำงานไม่ถูกต้องใน Internet Explorer ซึ่งเป็นส่วนใหญ่น่าจะเป็นสาเหตุของปัญหาของคุณ

อ่านข้อมูลและ สคริปต์ที่ยอดเยี่ยมที่แก้ไขปัญหาหลาย CSS IE

คุณสามารถใช้ได้

display: table;

สำหรับภาชนะบรรจุและหลีกเลี่ยงการ therfore overflow: hidden;ของคุณ มันควรจะทำงานถ้าคุณใช้มันเพียงเพื่อวัตถุประสงค์ในการแปรปรวน

<div style="height:200px;width:200px;border:; white-space: nowrap;overflow-x: scroll;overflow-y: hidden;">
   <p>The quick brown fox jumps over the lazy dog. The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.
   The quick brown fox jumps over the lazy dog.The quick brown fox jumps over the lazy dog.</p>
</div>

ใช้display:flexและwhite-space:nowrap

p{
  display:flex;
  white-space:nowrap;
  overflow:auto;
}

<h2>Sample Text.</h2>

<p>Some example text that will not wrap..lla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum d</p>

<h3>Then some other text</h3>

<span>แท็กจะใช้ในกลุ่มอินไลน์องค์ประกอบในเอกสาร
(ที่มา)