Как заставить 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 изменился на ширину 3000 пикселей в 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>

Дивы могут быть разделены пробелами. Если вы не хотите этого, используйте margin-right: -4px;вместо margin: 5px;for .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это испорчено, потому что у вас есть float: leftинкапсулированные divs.

Помимо этой ошибки, вы получили правильное поведение.

Попробуйте использовать width: 3000px;для случая IE.

Ничто из вышеперечисленного не помогло мне.

В моем случае мне нужно было добавить следующее в пользовательский элемент управления, который я создал:

display:inline-block;

Это min-widthсвойство не работает правильно в Internet Explorer, что, скорее всего, является причиной ваших проблем.

Прочитайте информацию и отличный скрипт, который исправляет многие проблемы с IE CSS .

ты можешь использовать

display: table;

для вашего контейнера и поэтому избегайте 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>Тег используется для групповых инлайн-элементов в документе.
(источник)