使浮动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。