防止浮动 div 在小窗口中分解

Question

我有三个 divs，它们通过在所有三个上使用 float: left 并排放置：

<div id="wrapper">
    <div id="left">...</div>
    <div id="center">...</div>
    <div id="right">...</div>
</div>

左侧和中心divs 具有固定宽度，而右侧div 将根据其内容具有可变宽度。

我遇到的问题是，当我使浏览器的窗口小于divs 的组合宽度（从而使包装器div 太窄）时，它们会分开并且不再出现在旁边-并排。
我知道使用静态/绝对定位会很容易解决，但根据我的经验，它比使用float 更难维护，我宁愿避免使用它。

有什么方法可以在不切换到其他定位技术的情况下解决这个问题？

Answer 1

即使在底部强制滚动球，您是否希望将 div 保持在同一行？如果是这样，您可以在容器 div 或右侧 div 上设置 min-width:。

您还可以在样式表中使用@media 规则，仅在屏幕低于特定尺寸时为右 div 提供固定宽度。像

@media only screen and (max-width: 600px) { 
 #div-right {  width:150px    }
}