当浏览器重新调整大小时，如何防止浮动的div元素被包装？

How do you make DIV's that are floated left next to each other not wrap when the browser is re-sized such that the viewport becomes smaller?

当浏览器重新调整大小以使视口变小时，如何使彼此相邻的DIV不会被包裹？

div {
  float: left;
}

For example when the browser is fully maximized the divs line up like this:

例如，当浏览器完全最大化时，div会排列如下：

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

But when the browser re-sized smaller this happens:

但是当浏览器重新调整大小时会发生这种情况：

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

How can I make the divs not wrap when the browser is re-sized smaller?

当浏览器重新调整大小时，如何使div不包装？

5 个解决方案

#1

Wrap them in another div, which has a width (or min-width) specified.

将它们包装在另一个div中，该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;
}

It also helps to have overflow: auto specified on the containing div, to allow its height to match the child floats.

它还有助于溢出：在包含div上自动指定，以允许其高度匹配子浮点数。

#2

I'm pretty late to the game, but here's what I've found that works:

我玩游戏的时间已经很晚了，但这是我发现的有效：

Let's say you have a navigation structured as:

假设您的导航结构如下：

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

To get it to display the links inline, without ever wrapping, you can simply use:

要让它显示内联链接，而不是包装，你可以简单地使用：

nav ul {
    white-space: nowrap;
}

nav ul li {
    display: table-cell;
}

No fixed widths or anything required.

无固定宽度或任何要求。

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

小提琴：http：//jsfiddle.net/gdf3prb4/

#3

Make the container div around them

使容器div围绕它们

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

#4

I realize that it's fashionable to hate on tables, but they can be useful.
http://jsfiddle.net/td6Uw/
Instead of floating the divs, place them in a table and wrap the table with a size-constrained div. The TR will prevent wrapping.
Also, I used DIVs inside the TDs to make cell styling easier. You could style the TDs if you spend the time, but I find them hard to style and usually wimp out and just use the DIV-in-TD method employed by my fiddle.

我意识到讨厌桌子很时髦，但它们很有用。 http://jsfiddle.net/td6Uw/不是浮动div，而是将它们放在一个表中，并用一个大小受限的div包装表。 TR将阻止包装。此外，我在TD中使用DIV来使单元格样式更容易。如果你花时间，你可以设计TD的样式，但我发现它们难以设计风格，通常只是使用我的小提琴使用的DIV-in-TD方法。

#5

It is actually really simple. Example of code:

它实际上非常简单。代码示例：

Element {
white-space: nowrap;
}

#1