CSS:模拟灵活宽度(没有最小宽度)-

Question

我有一个 100% 宽度的 DIV 容器，其中包含 x 个 div。最后一个子 DIV 向右浮动，其余的向左浮动。所有子 DIV 都保持在一行中，只要它们适合栏(所有方向都向左，除了最后一个单独位于右侧的 div)。如果窗口被调整得更小并且 children 没有足够的空间，他们会从水平方向折叠(我不想要)。要解决此问题，我知道我可以设置 DIV 容器的最小宽度，问题是容器中的 DIV 数量可变，宽度可变。我想模拟能够设置容器的最小宽度 where min-width = width of all children，但我无法计算这些，因为它们是可变的(这将模拟右 div 和其余部分之间的灵活空间，但不要让他们比他们应该允许的更近(因此折叠 div))。

我知道这有点不清楚所以这是一张图片:

谢谢!

Answer 1

我不想这么说(或者更确切地说，反对赌 table 的人会讨厌它)但你知道这很容易做到吗？

没错:表格。

<style type="text/css">
#topbar { width: 100%; }
#topbar div { white-space: nowrap; overflow: hidden; }
#topright div { text-align: right; }
</style>
<table id="topbar">
<tr>
  <td><div>Item 1</div></td>
  <td><div>Item 2</div></td>
  <td><div>Item 3</div></td>
  <td><div>Item 4</div></td>
  <td><div>Item 1</div></td>
  <td id="topright"><div>Item Right</div></td>
</tr>
</table>

内部 div 很重要，因为溢出隐藏仅适用于 block 元素，而表格单元格不是 block 元素(它们是“表格单元格”显示类型)。