Jak zrobić, żeby DIV się nie zawijał?

Muszę utworzyć styl DIV kontenera, który zawiera wiele innych DIV. Pyta się, czy te DIV-y nie zawiną się, jeśli rozmiar okna przeglądarki będzie wąski.

Starałem się, aby działało jak poniżej.

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

Działa to w większości przypadków. Jednak w niektórych szczególnych przypadkach renderowanie jest nieprawidłowe. Znalazłem zmianę DIV kontenera na szerokość 3000px w RTL IE7; i okazuje się, że jest bałagan.

Czy istnieje inny sposób, aby kontener DIV nie zawijał się?

Spróbuj użyć white-space: nowrap;w stylu kontenera (zamiast overflow: hidden;)

Jeśli nie chcę definiować minimalnej szerokości, ponieważ nie znam ilości elementów, jedyną rzeczą, która mi działała, było:

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

Ale tylko w Chrome i Safari: /

Poniższe działało dla mnie bez unoszenia się (nieco zmodyfikowałem twój przykład dla efektu wizualnego):

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

Div mogą być oddzielone spacjami. Jeśli nie chcesz tego, użyj margin-right: -4px;zamiast margin: 5px;do .slide(jest brzydki, ale jest to trudne do czynienia z problemem ).

Kombinacja, której potrzebujesz, to

white-space: nowrap

na rodzicu i

display: inline-block; // or inline

na dzieciach

To działało dla mnie:

.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: hiddenpowinien dać ci właściwe zachowanie. Domyślam się, że RTLjest to pomieszane, ponieważ masz float: leftna sobie enkapsulowane div.

Oprócz tego błędu masz odpowiednie zachowanie.

Spróbuj użyć width: 3000px;w przypadku IE.

Żadne z powyższych nie działało dla mnie.

W moim przypadku musiałem dodać następujące elementy do utworzonej przeze mnie kontroli użytkownika:

display:inline-block;

The min-width właściwość nie działa poprawnie w przeglądarce Internet Explorer, która najprawdopodobniej jest przyczyną problemów.

Przeczytaj informacje i genialny skrypt, który naprawia wiele problemów z IE CSS .

możesz użyć

display: table;

dla twojego pojemnika i dlatego unikaj overflow: hidden;. Powinien to zrobić, jeśli użyłeś go tylko do wypaczenia.

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

Użyj display:flexiwhite-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>Tag służy do grupowania elementów inline w dokumencie.
(źródło)