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

Question

我有三个div并排放置的 s 通过float: left在所有三个上使用：

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

left 和 centerdiv的宽度是固定的，而 rightdiv的宽度会根据其内容而变化。

我遇到的问题是，当我使浏览器的窗口小于divs 的组合宽度（从而使包装器div太窄）时，它们会分开并且不再看起来是并排的。
我知道使用静态/绝对定位将是一个简单的解决方法，但根据我的经验，它比使用更难维护float，我宁愿避免使用它。

有没有办法在不切换到不同的定位技术的情况下解决这个问题？

Answer 1

Do you want to keep the divs on the same row even if forces a scroll ball on the bottom? If so you can set a min-width: on the container div or the right div.

You could also use an @media rule in your style sheet to only give the right div a fixed width when the screen is below a certain size. Something like

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