html - 使 float 的 div 缩小而不是掉到新行

Question

有什么方法可以强制 float 的 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 设置相对(例如百分比)宽度？

当您在未明确声明宽度(固定宽度或相对宽度)的情况下 float 时，尺寸将默认为“自动”。自动将强制 div 为其内容的宽度。当浏览器缩小时，内容仍会强制这些框达到该宽度，直到它因触摸另一个元素而被迫折叠。

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

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