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

Question

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

div {
  float: left;
}

例如,当浏览器完全最大化时,divs排列如下:

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

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

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

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

Answer 1

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

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

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

无固定宽度或任何要求.

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

Answer 3

使容器div围绕它们

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

Answer 4

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

Answer 5

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

Element {
white-space: nowrap;
}