CSS：模拟灵活宽度（无最小宽度） -

Question

我有一个100％宽度的DIV容器，容纳x个div。最后一个孩子DIV漂浮在右边，其余的漂浮在左边。所有儿童DIV都保持在一条直线上，只要它们适合于杆（所有朝向左侧，除了最后一个div本身位于右侧）。如果窗口调整得更小并且孩子没有足够的空间，他们会从水平方向折叠（我不想要）。为了解决这个问题，我知道我可以设置DIV容器的最小宽度，问题是容器中有可变数量的DIV，宽度可变。我想模拟能够在min-width =所有孩子的宽度的容器中设置最小宽度，但是我无法计算这些因为它们是可变的（这将模拟右div与其余部分之间的灵活空间） ，但不要让它们比应该被允许的更接近（因此崩溃div））。

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

谢谢！

Answer 1

我不想这么说（或者说反桌人群会讨厌它）但是你知道这很容易吗？

那是对的：表格。

<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非常重要，因为隐藏溢出仅适用于块元素，而表格单元格不是块元素（它们是“表格单元格”显示类型）。