Wie macht man einen DIV nicht wickeln?

Ich muss einen Container-DIV-Stil erstellen, der mehrere andere DIVs enthält. Es wird darum gebeten, dass diese DIVs nicht umbrochen werden, wenn die Größe des Browserfensters auf eine enge Größe geändert wird.

Ich habe versucht, es wie unten zu machen.

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

Dies funktioniert in den meisten Fällen. In einigen besonderen Fällen ist das Rendern jedoch falsch. Ich habe festgestellt, dass der Container DIV in RTL von IE7 auf 3000px Breite geändert wurde. und es wird unordentlich.

Gibt es eine andere Möglichkeit, einen Container DIV nicht zu verpacken?

Versuchen Sie es white-space: nowrap;im Container-Stil (anstelle von overflow: hidden;)

Wenn ich keine minimale Breite definieren möchte, weil ich die Anzahl der Elemente nicht kenne, hat mir nur Folgendes geholfen:

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

Aber nur in Chrome und Safari: /

Folgendes hat bei mir ohne Schweben funktioniert (ich habe Ihr Beispiel ein wenig geändert, um einen visuellen Effekt zu erzielen):

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

Die Divs können durch Leerzeichen getrennt sein. Wenn Sie dies nicht möchten, verwenden Sie margin-right: -4px;statt margin: 5px;für .slide(es ist hässlich, aber es ist ein schwieriges Problem, damit umzugehen ).

Die Combo, die Sie brauchen, ist

white-space: nowrap

auf die Eltern und

display: inline-block; // or inline

auf die Kinder

Das hat bei mir funktioniert:

.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: hiddensollte Ihnen das richtige Verhalten geben. Meine Vermutung ist, dass RTLdas durcheinander ist, weil Sie float: leftauf dem eingekapselten divs haben.

Neben diesem Fehler haben Sie das richtige Verhalten.

Versuchen Sie, width: 3000px;für den Fall von IE zu verwenden.

Keines der oben genannten hat bei mir funktioniert.

In meinem Fall musste ich dem von mir erstellten Benutzersteuerelement Folgendes hinzufügen:

display:inline-block;

Die min-widthEigenschaft funktioniert in Internet Explorer nicht ordnungsgemäß. Dies ist höchstwahrscheinlich die Ursache für Ihre Probleme.

Lesen Sie Informationen und ein brillantes Skript, das viele IE-CSS-Probleme behebt .

Sie können verwenden

display: table;

für Ihren Container und vermeiden Sie deshalb die overflow: hidden;. Es sollte den Job machen, wenn Sie es nur zum Verzerren verwendet haben.

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

Verwenden Sie display:flexundwhite-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>

Das <span>Tag wird verwendet, um Inline-Elemente in einem Dokument zu gruppieren.
(Quelle)