使浮动 div 缩小而不是下降到新行答案

【问题标题】：Making floated div shrink instead of dropping to new line使浮动 div 缩小而不是下降到新行
【发布时间】：2019-04-20 00:02:37
【问题描述】：

有什么办法可以强制浮动的 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 在浏览器窗口缩小时开始缩小，而不是先放下一行，然后在窗口进一步调整大小时缩小。

【问题讨论】：

浮动 DIv 的一个影响是它“缩小”到它的固有宽度，所以你需要显示一些代码，以便我们可以弄清楚为什么它也会出现在新的行。
我编辑了上面的帖子并添加了一些示例代码。

标签： html css css-float word-wrap

【解决方案1】：

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

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

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

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

【讨论】：

效果很好。我只是想出了我想要支持的最小宽度是多少，减去我的徽标 div 的宽度，然后将剩余宽度作为百分比（即 700px 最小宽度 - 140px 徽标 div = 560px 或 80%）

【解决方案2】：

CSS 的display 属性，将其设置为inline，div 的行为将类似于span。

【讨论】：

它仍在下降到下一行。该行上有一个左浮动元素和一个右浮动元素（徽标向左浮动，菜单向右浮动）
如果没有tables，我想不出办法解决这个问题。我讨厌用表格做布局......我知道这是撒旦的方式......
这是我在桌子前以固定宽度走的唯一路线。