Как я могу предотвратить обтекание флотированных элементов div при изменении размера браузера?

Как вы делаете DIV, которые плавают слева друг от друга, не переносятся, когда размер браузера изменен таким образом, что область просмотра становится меньше?

div {
  float: left;
}

Например, когда браузер полностью максимизирован, строка div выглядит так:

|div| |div| |div| |div| |div| |div| |div| |div|

Но когда размер браузера меньше размера, это происходит:

|div| |div| |div| |div| |div|
|div| |div| |div|

Как я могу сделать div не wrap, когда размер браузера меньше размера?

Ответ 1

Оберните их в другой div, который имеет ширину (или минимальную ширину).

<div class="parentContainer">
    <div class="floater"></div>
    <div class="floater"></div>
    <div class="floater"></div>
</div>

.parentContainer {
    /* The width of the parent needs to be equal to the total width of the children.
    Be sure to include margins/padding/borders in the total. */
    width: 600px;
    overflow: auto;
}

Это также помогает иметь переполнение: автоматически указано в содержащем div, чтобы его высота соответствовала дочерним поплавкам.

Ответ 2

Я довольно поздно в игре, но вот что я нашел, что работает:

Скажем, у вас есть навигация, структурированная как:

<nav>
    <ul>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
        <li><a href="#">Example Link</a></li>
    </ul>
</nav>

Чтобы отобразить ссылки в строке, без какой-либо упаковки, вы можете просто использовать:

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

Нет фиксированной ширины или чего-либо еще.

Fiddle: http://jsfiddle.net/gdf3prb4/

Ответ 3

Сделайте контейнер div вокруг них

.container {
width: 500px;
white-space: nowrap;
overflow: visible/hidden/scroll - whichever suits you;
}

Ответ 4

Я понимаю, что модно ненавидеть на столах, но они могут быть полезны.
http://jsfiddle.net/td6Uw/
Вместо того, чтобы плавать divs, поместите их в таблицу и оберните таблицу с помощью div с ограничением размера. TR предотвратит обертывание.
Кроме того, я использовал DIV внутри TDs, чтобы упростить стилизацию ячейки. Вы можете создать TDs, если вы потратите время, но я нахожу их трудными для стиля и обычно wimp out и просто использую метод DIV-in-TD, используемый моей скрипкой.

Ответ 5

На самом деле это действительно просто. Пример кода:

Element {
white-space: nowrap;
}

Ответ 6

.parent{
  white-space: nowrap;
}

.floater{
  float: left;
  display:inline-block;
}

также должен сделать трюк. не требуется ширина.