在 CSS 中，如何不将 300px 宽的 Div 浮动到下一行？

Posted 2023-03-06

【中文标题】在 CSS 中，如何不将 300px 宽的 Div 浮动到下一行？

【英文标题】：In CSS, how to not float a 300px wide Div to the next line?

【发布时间】：2011-03-01 23:40:54

【问题描述】：

说，在视口底部有一个样式，使用

position: fixed; bottom: 0; left: 0; width: 100%; height 50px; overflow: hidden

然后里面有4个Div，每个都向左浮动。每个 Div 大约 300px 宽或可以更大（取决于内容）

现在，当窗口为 1200 像素宽时，我们看到所有 4 个 Div，但是当窗口调整为 1180 像素宽（仅减少 20 像素）时，整个 300 像素宽的 Div 将消失，因为它是“浮动”到下一行。

那么如何做到这一点，Div 将保持在那里并显示自身 280 像素，而不是完全消失？

顺便说一句，white-space: nowrap 不起作用，因为这可能与不包装内联内容有关。

我正在考虑在这个 Div 里面放另一个 Div，固定宽度为 1200px 或 2000px，这样所有 Div 都会在这个内部 Div 中浮动在同一水平面上，而外部 Div 会用 @987654323 将其切断@。但这似乎更像是一种 hack……因为所有这些 Div 的宽度都可以是动态的，并且设置 1200px 或 2000px 的固定宽度似乎太过于 hack。

更新：实际上，hack 是一个相对简单的解决方案，不必处理 IE 6 或 7...尤其是如果我们知道栏不会超过 2000 像素宽。

【问题讨论】：

你确定吗？ clear 是让正常流动在浮动元素周围停止，并且必须低于它。

【参考方案1】：

将4个内部div设置为display: inline-block;，然后就可以使用white-space: nowrap;了。

然后可以删除float。

注意：如果必须支持IE7及以下，请添加以下条件CSS：

<!--[if lte IE 7]>
<style  type="text/css">
    .BottomWrapper div
    
        display:            inline;
        position:           relative;
        bottom:             0;
    
</style>
<![endif]-->

【讨论】：

请注意，像许多 CSS 属性一样，旧版 IE 不能很好地支持 inline-block，并且在 IE 8 以下的任何内容中都无法在 <div> 上工作。更多信息：quirksmode.org/css/display.html#inlineblock

@mipadi：它适用于 IE8 和所有其他现代浏览器——根据 browsershots.org。无论如何，IE7 及更低版本总是需要有条件地包含解决方法 CSS（这无疑是 TBD）。

其实还不错，加了CSS来弥补IE的bug，见修改后的答案。