Как сделать 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 не для переноса?

Ответы

Ответ 1

Попробуйте использовать white-space: nowrap; в стиле контейнера (вместо overflow: hidden;)

Ответ 2

Если я не хочу определять минимальную ширину, потому что я не знаю количество элементов, единственное, что сработало для меня:

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

Но только в Chrome и Safari:/

Ответ 3

Следующие работали для меня без плавающей (я немного изменил ваш пример для визуального эффекта):

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

Ответ 4

Это сработало для меня:

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

Ответ 5

Комбо вам нужно

white-space: nowrap

для родителя и

display: inline-block; // or inline

для детей

Ответ 6

overflow: hidden должно дать вам правильное поведение. Я предполагаю, что RTL испорчен, потому что у вас есть float: left на инкапсулированные div s.

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

Ответ 7

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

Ответ 8

Ни одно из вышеперечисленных не работало для меня.

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

display:inline-block;

Ответ 10

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

display: table;

для вашего контейнера и перед этим избегайте overflow: hidden;. Он должен выполнять эту работу, если вы использовали ее только для целей деформации.

Ответ 11

Тег <span> используется для группировки встроенных элементов в документе.
(источник)

Ответ 12

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