Как заставить DIV не оборачиваться?

Question

Мне нужно создать контейнер 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 не оборачивать?

Answer 1

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

Answer 2

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

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

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

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

Дивы могут быть разделены пробелами. Если вы не хотите этого, используйте margin-right: -4px; вместо margin: 5px; для .slide (это уродливо, но это сложная проблема с ).

Answer 4

Вам нужно комбо

white-space: nowrap

на родителя и

display: inline-block; // or inline

на детей

Answer 5

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

.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 / сниппеты / CSS / а-руководство к Flexbox /

Answer 6

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

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

Answer 7

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

Answer 8

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

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

display:inline-block;

Answer 9

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

display: table;

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

Answer 10

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

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