html - 重新调整浏览器大小时，如何防止 float 的 div 元素换行？

Question

当重新调整浏览器大小时视口(viewport)变小时，如何使相邻 float 的 DIV 不换行？

div {
  float: left;
}

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

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

但是当浏览器的尺寸变小时，会发生这种情况:

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

当浏览器变小时，如何让 div 不换行？

Answer 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 上指定 overflow: auto 也有帮助，以允许其高度与子 float 匹配。