CSS：模拟灵活的宽度（不含最小宽度） -

Question

我有一个DIV容器，其宽度为100％，容纳x div。最后一个孩子的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是重要的，因为溢出隐藏仅适用于块元素和表格单元不阻止元件（他们是“表格单元”显示类型）。