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

Question

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

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

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

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

<div id="left">
  <p>This div represents the logo</p>
</div>
<div id="right">
  <p>When the window's width is reduced and these divs touch I want this div to shrink instead of falling to the next line.
  </p>
</div>

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

Answer 1

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

当您浮动而未明确声明固定或相对宽度时，尺寸将默认为“自动”。 Auto会强制div为其内容的宽度。当浏览器缩小时，内容仍将强制这些框到该宽度，直到通过触摸另一个元素强制折叠。

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

有很多资源可以帮助您实现更流畅的布局（www.alistapart.com上的很多文章都在深入讨论这个问题）。

Answer 2

CSS的display属性，将其设置为inline，而div将表现得像span。