Як зробити 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>

Дійки можуть бути розділені пробілами. Якщо ви не хочете цього, використовуйте 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це зіпсовано, тому що у вас є 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>Тег використовується для групових інлайн-елементів в документі.
(джерело)