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是重要的，因爲溢出隱藏僅適用於塊元素和表格單元不阻止元件（他們是「表格單元」顯示類型）。