使浮动div缩小而不是降低到新线

Question

有什么办法可以强制浮动的div缩小而不是去换行吗？

我知道我可以在div上设置隐式宽度,但它位于菜单上,其中可能包含可变数量的项目.我正在尝试这样做,同时尽可能保持网站的布局流畅.

编辑以显示代码

#left {
  float: left;
  border: 1px solid #000;
}

#right {
  float: right;
  border: 1px solid #000;
}

基本上,我希望#right在缩小浏览器窗口时开始缩小,而不是先让它掉线,然后在窗口进一步调整大小时缩小.

Answer 1

您是否尝试过为这两个 div 设置相对（例如百分比）宽度？

当您在没有明确声明宽度的情况下浮动时，无论是固定的还是相对的，尺寸将默认为“自动”。Auto 将强制 div 为其内容的宽度。当浏览器缩小时，内容仍然会强制这些框到那个宽度，直到它通过触摸另一个元素被强制折叠。

使用自动宽度并不是在布局中实现流动性的最佳方式。您需要在某处指定某种相对维度，否则这个问题将完全不可避免。

有很多资源可以帮助您实现更流畅的布局（www.alistapart.com 上的很多文章对此进行了深入讨论）。